传统的网页布局中，我们经常使用display:block+margin+padding+float+position来实现，但随着网页越来越复杂，对于某些不确定宽高的元素想要实现垂直居中实际上是比较困难的，而随着CSS3中Flex布局的出现，解决了传统布局中一些不易实现的问题。

Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。

Flex布局具有以下特点：

1、Flex布局与方向无关。
2、Flex布局可以实现空间的自动分配、自动对齐，具有很强的灵活性。
3、Flex布局试用于简单的线性布局，更复杂的布局可以考虑用JS或者grid实现。

一、Flex布局的概念

在容器内，默认有两条轴，水平方向为主轴（main axis），垂直方向为侧轴（cross axis），主轴方向起始位置为主轴起点（main start），主轴方向终点位置为主轴终点（main end），侧轴方向起始位置为侧轴起点（cross start），主轴方向终点位置为主轴终点（cross end），容器的主尺寸为main size，侧尺寸为cross size，容器内的子元素为flex item，当给container设置display:flex，每一个子元素都是container的item。

二、Flex容器的属性

1
2
3
4
5
6
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

flex-direction属性

flex-direction表示主轴的方向。

1
flex-direction: row（默认值） | row-reverse | column | column-reverse;

row：主轴方向为水平方向，从左至右。

flex-direction:row;

row-reverse：主轴方向为水平方向，从右至左。

flex-direction:row-reverse;

column：主轴方向为垂直方向，从上至下。

flex-direction:column;

column-reverse：主轴方向为垂直方向，从下至上。

flex-direction:column-reverse;

flex-wrap属性

1
flex-wrap: no-wrap（默认）| wrap | wrap-reverse;

flex-wrap是指在主轴方向上如果项目过多排列不下时是否换行，默认情况下是不换行的。
wrap:轴线方向换行，第一行在上。

flex-wrap:wrap;

wrap-reverse：轴线方向换行，第一行在下

flex-wrap:wrap-reverse;

flex-flow属性

flex-flow是flex-direction和flex-wrap的简写，默认为 row no-wrap。

1
flex-flow: <flex-direction> || <flex-wrap>;

justify-content属性

justify-content是指主轴方向对齐方式。

1
justify-content:flex-start（默认） | flex-end | center | space-between | space-around;

flex-start：主轴方向从左端对齐。

justify-content:flex-start;

flex-end：主轴方向从末端对齐。

justify-content:flex-end;

center：主轴方向从中间对齐。

justify-content:center;
space-between：主轴方向两端对齐，项目之间的空间均匀分配。

justify-content:space-between;

space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

justify-content:space-around;

align-items属性

align-items 是指侧轴方向对齐方式。

1
align-items: flex-start | flex-end | center | baseline | stretch;

flex-start：侧轴方向上端对齐。
align-items:flex-start;
flex-end：侧轴方向底端对齐。
align-items:flex-end;

center：侧轴方向中心对齐。
align-items:center;
baseline：侧轴方向上文字基线对齐。

align-items:baseline;
strech（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

align-items:strech;

align-content属性

align-content属性定义了多根轴线（多行或是多列）的对齐方式。如果项目只有一根轴线（一行或是一列），该属性不起作用。

1
align-content: flex-start | flex-end | center | space-between | space-around | stretch;

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

align-conten:flex-start;

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

align-content: flex-end;

center：与交叉轴的中点对齐。

align-content: center;

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

align-content: space-between;

space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。

align-content: space-around;

stretch（默认值）：轴线占满整个交叉轴。

align-content: strech;

三、Flex项目的属性

1
2
3
4
5
6
align-self
flex-grow
flex-shrink
flex-basis
flex
order

align-self属性

align-self属性定义flex的单个项目在侧轴上的对齐方式，默认为auto，表示继承父元素的align-items，否则将覆盖align-items属性。

1
align-self: auto | flex-start | flex-end | center | baseline | stretch;

center：
align-self: center;
其他值与align-items属性值用法相同。

flex-grow属性

flex-grow定义项目的扩展比率（一般使用在空间过多时），默认为0，即便存在剩余空间，也不放大。

1
flex-grow: <number> ;   /* default 0 */

如果所有的项目不为0，如1/2/3，则等分剩余空间，如果item1项目为1，其他项目为0，则item1占据所有剩余空间，如果item1项目为1，item2项目为2，则item2占据的剩余空间比item1多一倍。

.item1{flex-grow: 1;}

.item1{flex-grow: 1;} .item2{flex-grow: 2;}

flex-shrink属性

flex-shrink定义项目的收缩比率（一般使用在空间不足时），默认为1，即空间不足时，项目缩小，为0表示不缩小。
该属性对负值无效。

1
flex-shrink: <number>; /* default 1 */

如果所有项目均为1，则所有项目同比例缩小
.item{flex-shrink: 1;}

如果item1为0，其他item均为1，则item1不缩小，其他item同比例缩小
.item1{flex-shrink: 0;}

flex-basis属性

flex-basis定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

1
flex-basis: <length> | auto; /* default auto */

.item1{flex-basis: 400px;}

flex属性

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

1
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

order属性

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
该属性对负值有效。

1
order: <integer>;

关于各属性浏览器的支持程度可以在can I use中查看