布局 - flex 弹性布局Flex 是 Flexible Box 的缩写，意为“弹性盒子”，采用 Flex 布局的元素

场景需求

对于传统网页来说，由于市场硬件设备分辨率相差不多或类型不多，网页布局常常使用的是相对固定的排列模式，较少考虑界面分辨率多样和特殊布局的情况，因此传统页面布局一般使用 display属性+position属性+float属性结合使用，但随着移动端设备逐渐增多，如何能够更适应多样的移动端布局，以及某些需要特殊布局的情况，就需要更加灵活的布局技术。

2009年，W3C 提出了一种新的方案 Flex 布局，可以简便、完整、响应式地实现各种页面布局，尤其适合移动端布局。

基本概念

Flex 是 Flexible Box 的缩写，意为“弹性盒子”，采用 Flex 布局的元素，称为 Flex 容器（Flex Container），简称“容器”，它的所有子元素自动成为容器成员，称为 Flex 项目（Flex Item），简称“项目”。
容器：默认存在两根轴，水平的主轴main axis和垂直的交叉轴cross axis。主轴的开始位置为 main start，主轴的结束位置为end start，交叉轴的开始位置cross start，交叉轴的结束位置cross end
项目：默认沿主轴main axis排列，单个项目占据的主轴空间称为main size，占据的交叉轴空间称为cross size

功能影响

子元素默认横向排列
子元素由行内元素变成块级元素
子元素可直接添加 margin:auto; 实现中心居中

核心代码

.box{
    display:flex;  //任何一种容器都可以指定为Flex布局
}
.inline_block{
    display:inline-flex;  //行内元素也可以使用 Flex 布局
}

注意：当设置 Flex 之后，子元素的 float、clear、vertical-align 均会失效

容器属性1 flex-diretion

flex-direction 指定主轴方向（main axis 项目排列方向）

.box{
    flex-direciton:row | row-reverse | column | column-reverse;
}

容器属性2 flex-wrap

flex-wrap 指定换行方式

.box{
    flex-wrap:nowrap | wrap | wrap-reverse;
}

容器属性3 flex-flow

flex-flow 是 flex-direction 和 flex-wrap 的简写形式，默认值为 flex-flow:row nowrap;

.box{
    flex-flow: <flex-direction> || <flex-wrap> ;
}

容器属性4 justify-content

justify-content 属性定义项目在主轴上的对齐方式

.box{
    justify-content: flex-start | flex-end | center | space-between | space-around ;
}

容器属性5 align-items

align-items 定义项目在交叉轴上如何对齐

.box{
    align-items: flex-start | flex-end | center | baseline | stretch ;
}

容器属性6 align-content

align-content 定义多根轴线的对齐方式，相当于控制折行之后的行间距，因此如果项目只有一根轴线（只有一行内容），该属性不起作用，需要使用align-items

.box{
    align-content: flex-start | flex-end | center | space-between | space-around | stretch ;
}

项目属性1 order

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

.item{
    order:<integer>;
}

项目属性2 flex-grow

flex-grow 定义项目的放大比例，默认为0（即即使存在剩余空间，也不放大）；如果所有项目的 flex-grow 属性都为1，则它们将等分剩余空间；如果一个项目的 flex-grow 属性为2，其它项目都为1，则前者占据的剩余空间将比其它项多一倍。

.item{
    flex-grow:<number>; /* default 0 */
}

项目属性3 flex-shrink

flex-shrink 定义项目的缩小比例，默认为1，如果空间不足，会等比例缩小；如果一个项目的 flex-shrink 属性为0，其他项目都为1，空间不足，前者不会缩小；负值对该属性无效

.item{
    flex-shrink:<number>; /* default 1 */
}

项目属性4 flex-basis

flex-basis 定义项目占据的主轴空间（main size），即规定灵活项目的基准长度，从而浏览器会根据这个属性，计算主轴是否有多余空间，默认值为auto（项目本身的大小）

.item{
    flex-basis: <length>; /* default auto */
}

项目属性5 flex

flex 属性简写

.items{
    flex: <flex-grow> <flex-shrink> <flex-basis>; /* default 0 1 auto */
}

该属性有两个快捷值： flex:auto; 和 flex:none; ；分别代表 flex: 1 1 auto; 和 flex:0 0 auto;;

项目属性6 align-self

align-self 设置单个项目对齐方式，效果等同于 align-items，默认值为auto，表示继承父元素的 align-item，如果没有父元素，则等同于 stretch

.item{
    align-self:auto | flex-start | flex-end | center | baseline | stretch ;
}