flex 移动开发 html5,H5开发开发利器——flex

距离新建这篇文章已经好几个月了，今天有终于有时间来完善这篇文章了...

flexbox即弹性布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了大部分浏览器的支持。

flexbox共经历了三个阶段的变化：

(1)W3C 2009年第1次草案：display:box

(2)W3C 2011年第2次草案：display:flexbox

(3)W3C 2012年第3次草案：display:flex(当前阶段版本)

首先来看张图了解下几个基本的概念：

采用Flex布局的元素，称为Flex容器(flex container)，简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目(flex item)，简称”项目”。

容器默认存在两根轴：水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

任何一个元素都可以只能为flex布局，其可以水平布局也可以垂直布局(通过设置flex-direction：row／columnl来设置)，设置元素为flex 布局后我们还可以根据不同的需求在该元素上设置一下几种属性(容器属性)：

(1)flex-direction属性决定主轴的方向(即项目的排列方向)

值范围：flex-direction:

row (默认值)：主轴为水平方向，起点在左端

row-reverse 主轴为水平方向，起点在右端

column 主轴为垂直方向，起点在上沿

column-reverse; 主轴为垂直方向，起点在下沿

(2)flex-wrap属性决定了如果一条轴线排不下，如何换行

值范围：flex-wrap:

nowrap 不换行

wrap 换行，从第二行的左侧开始

wrap-reverse 换行，从第二行的右侧开始

(3)justify-content属性决定了项目在主轴上的对齐方式

值范围：justify-conten:

flex-start 左对齐

flex-end 右对齐

center 居中对齐

space-between 两端对齐，项目之间的间隔都相等

space-around 每个项目两侧的间隔相等

(4)align-items属性决定了项目在交叉轴上如何对齐方式

值范围：align-items:

flex-start 交叉轴的起点对齐。

flex-end 交叉轴的终点对齐。

center 交叉轴的中点对齐。

baseline 项目的第一行文字的基线对齐。

stretch 如果项目未设置高度或设为auto，将占满整个容

器的高度。

(5)align-content属性决定了多根轴线的对齐方式，如果项目只有一根轴线，该属性不起作用

值范围：align-content:

flex-start 与交叉轴的起点对齐。

flex-end 与交叉轴的终点对齐。

center 与交叉轴的中点对齐。

space-between 与交叉轴两端对齐，轴线之间的间隔平均分布。

space-around 每根轴线两侧的间隔都相等。所以，轴线之间的

间隔比轴线与边框的间隔大一倍。

stretch 轴线占满整个交叉轴。

**以上就是flex布局时容器上比较重要的属性，需理解透彻。**

说完容器的布局属性再来说说容器下各个项目的布局属性

以下6个属性设置在项目上：

1. order 定义项目的排列顺序。数值越小，排列越靠前，默认为0

2. flex-grow 定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大

3. flex-shrink 定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小

4. flex-basis 定义了在分配多余空间之前，项目占据的主轴空间(main size)。浏

览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即

项目的本来大小

5. align-self 允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属

性。默认值为auto，表示继承父元素的align-items属性，如果没有

父元素，则等同于stretch

**以上就是flex布局时项目上比较重要的属性，需理解透彻。**

几点注意事项

flex布局其实就是将父类的元素实现了流式布局，我们只需要在父类定位好的情况下给子类“添砖

加瓦”就可以了

justify-content：center + align-content：center 结合使用可以很方便的实现元素水

平和垂直居中，相比之前用position来实现要高效很多

由于经历了3个阶段的演变，所有在个别浏览器下会存在兼容性问题(如uc的低版本、QQ浏览器)，

所以建议使用"autoprefixer"这类工具自动补全各类写法已避免该问题的出现