FlexBox简称“弹性盒子”,除了用于实现弹性布局,还可以用来居中内容,改变标记中的源码顺序。首先说明IE9及以下浏览器不支持FlexBox。

.flex{
display:flex;
flex:1;
justify-content:space-between;
}

 这里使用了比较新的语法。但是,要想支持安卓浏览器(v4及以下版本操作系统)和IE10,最终代码得这样写:

.flex {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
}

     这些代码一个都不能少,因为近几年来浏览器不断以实验性特性推出新功能,而这些实验性特性都要加“厂商前缀”。每家浏览器厂商都有自己的前缀。比如-ms-是Microsoft, -webkit-是WebKit, -moz-是Mozilla。于是,每个新特性要在所有浏览器中生效,就得写好几遍。首先是带各家厂商前缀的,最后一行才是W3C标准规定的。 下面介绍的都是简写模式。

flex里主要的几个属性:

1、flex-flow:row warp,包含两个属性flex-direction和flex-warp,flex-direction中为column垂直排列,column-reverse垂直反序排列,row横向排列,row-reverse,横向反序排列。

2、align-items:在交叉轴上对齐元素,center:居中定位。flex-start:从父元素起始边开始对齐。flex-end:与flex-start相反。baseline:让Flexbox元素中的所有项沿基线对齐。 stretch:让Flexbox中的所有项(没交叉轴)拉伸至与父元素一样大。
          3、justify-content :在主轴上对齐元素,flex-start,flex-end,center跟上面差不多,不做过多解释,space-between和space-around处理盒子之间的间距,只是space-around在两侧都有间距而space-between中间有间距。

   4、flex:1 1 100px,包含三个属性flex-grow、 flex-shrink和flex-basis,第一个属性指是相对于其他伸缩项,当前伸缩项在空间允许的情况下可以伸展的量。 第二个属性是在空间不够的情况下,当前伸缩项相对于其他伸缩项可以收缩的量。 第三个属性是是伸缩项伸缩的基准值。
   5、align-self:单个元素对齐方式,属性与align-items属性一致。  

   6、order:1,定义元素出场顺序,可以为负数,负数排在最前面。

  关于Flexbox的对齐,最重要的是理解坐标轴。有两个轴,“主轴”和“交叉轴”。这两个轴代表什么取决于Flexbox排列的方向。比如,如果将Flexbox的方向设置为row,则主轴就是横轴,而交叉轴就是纵轴。
反之,如果Flexbox的方向是column,则主轴就是纵轴,而交叉轴为横轴。

 关于响应式设计推荐一本书《响应式Web设计+HTML5和CSS3实战+第2版》。

 

学习笔记flexbox新布局的更多相关文章

  1. 【前端】移动端Web开发学习笔记【2】 & flex布局

    上一篇:移动端Web开发学习笔记[1] meta标签 width设置的是layout viewport 的宽度 initial-scale=1.0 自带 width=device-width 最佳实践 ...

  2. amazeui学习笔记--css(常用组件3)--按钮组Button-group

    amazeui学习笔记--css(常用组件3)--按钮组Button-group 一.总结 1.按钮组用法:把一系列要使用的 .am-btn 按钮放入 .am-btn-group . 2.按钮工具栏: ...

  3. React Native 学习笔记--进阶(二)--动画

    React Native 进阶(二)–动画 动画 流畅.有意义的动画对于移动应用用户体验来说是非常必要的.我们可以联合使用两个互补的系统:用于全局的布局动画LayoutAnimation,和用于创建更 ...

  4. js学习笔记:webpack基础入门(一)

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  5. PHP-自定义模板-学习笔记

    1.  开始 这几天,看了李炎恢老师的<PHP第二季度视频>中的“章节7:创建TPL自定义模板”,做一个学习笔记,通过绘制架构图.UML类图和思维导图,来对加深理解. 2.  整体架构图 ...

  6. PHP-会员登录与注册例子解析-学习笔记

    1.开始 最近开始学习李炎恢老师的<PHP第二季度视频>中的“章节5:使用OOP注册会员”,做一个学习笔记,通过绘制基本页面流程和UML类图,来对加深理解. 2.基本页面流程 3.通过UM ...

  7. 2014年暑假c#学习笔记目录

    2014年暑假c#学习笔记 一.C#编程基础 1. c#编程基础之枚举 2. c#编程基础之函数可变参数 3. c#编程基础之字符串基础 4. c#编程基础之字符串函数 5.c#编程基础之ref.ou ...

  8. JAVA GUI编程学习笔记目录

    2014年暑假JAVA GUI编程学习笔记目录 1.JAVA之GUI编程概述 2.JAVA之GUI编程布局 3.JAVA之GUI编程Frame窗口 4.JAVA之GUI编程事件监听机制 5.JAVA之 ...

  9. seaJs学习笔记2 – seaJs组建库的使用

    原文地址:seaJs学习笔记2 – seaJs组建库的使用 我觉得学习新东西并不是会使用它就够了的,会使用仅仅代表你看懂了,理解了,二不代表你深入了,彻悟了它的精髓. 所以不断的学习将是源源不断. 最 ...

随机推荐

  1. css ie6双倍margin现象

    IE6双倍margin bug 当出现连续浮动的元素,携带和浮动方向相同的margin时,队首的元素,会双倍marign. 解决方案: 1)使浮动的方向和margin的方向,相反. 所以,你就会发现, ...

  2. centos的基本命令02

    16:查看系统运行的进程 ps -ef 17:查看系统已开放的端口 netstat -tunlp 18:管道命令 ps -ef | grep tom # 查看系统中与tom相关的进程 19:grep过 ...

  3. Django中的CSRF(跨站请求伪造)

    Django中的CSRF(跨站请求伪造) Django CSRF  什么是CSFR 即跨站请求伪装,就是通常所说的钓鱼网站. 钓鱼网站的页面和正经网站的页面对浏览器来说有什么区别? (页面是怎么来的? ...

  4. es6 简单封装一个 省市县三级下拉框

    废话不多说,直接上效果图和代码: 1,index.js function $(el){ return document.getElementById(el) } let render = Symbol ...

  5. EPC sequence

    nps-epc-term-2.7.0 eNodeB: /root/b2b/eutran/01/bin ./clean_log.sh ./set_ip.sh [root@CEN6- bin]# ./cl ...

  6. 安装vs2013要求重启后安装

    解决方案: 卸载360,然后杀毒, 重启电脑就可以直接安装vs了

  7. SQL Server 保留关键字

    Microsoft SQL Server 2005 使用保留关键字来定义.操作或访问数据库.保留关键字是 SQL Server 使用的 Transact-SQL 语言语法的一部分,用于分析和理解 Tr ...

  8. SQL Cookbook—字符串

    1.遍历字符串2.计算字符在字符串中出现的次数3.从字符串中删除不需要的字符4.将字符和数字数据分离5.判别字符串是不是字母数字型的6.提取姓名的大写首字母缩写7.按字符串中的部分内容排序8.按字符串 ...

  9. django允许跨域请求配置

    django允许跨域请求配置 下载corsheader pip install django-cors-headers 修改setting.py中配置 在INSTALLED_APPS中增加corshe ...

  10. Redis的安装(CentOS 7下)

    redis的官网,www.redis.io 1. 先下载 redis: wget http://download.redis.io/releases/redis-3.0.3.tar.gz 2. 解压: ...