弹性布局flex

弹性布局，又称“Flex布局”，可以简便、完整、响应式地实现各种页面布局。采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目(flex item)，简称”项目” 。
注：设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

父容器属性

#fu-box{
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    align-items: stretch;
    align-content: stretch;
}

flex-flow：主轴方向flex-direction和换行方式flex-wrap的缩写形式

值	描述
row	主轴从左往右
row-reverse	主轴从右往左
column	主轴从上往下
column-reverse	主轴从下往上
wrap	子元素排满时换行
nowrap	子元素排满时挤压不换行

justify-content：主轴设置，即项目水平方向位置

值	描述
flex-startp(默认值)	项目位于主轴起点
flex-end	项目位于主轴终点
center	居中
space-between	两端贴边对齐，项目之间的间隔都相等
space-around	平均，每个项目两侧的间隔相等

align-items：侧轴设置，即项目垂直方向位置

值	描述
stretch(默认值)	元素被拉伸以适应容器
flex-startp	项目位于侧轴起点
flex-end	项目位于侧轴终点
center	居中
baseline	与项目的第一行文字的基线对齐

align-content：当项目换为多行时，即用align-content取代align-items，值同 justify-content

值	描述
stretch(默认值)	元素被拉伸以适应容器
flex-startp	项目位于侧轴起点
flex-end	项目位于侧轴终点
center	居中
space-between	两端贴边对齐，项目之间的间隔都相等
space-around	平均，每个项目两侧的间隔相等

子项目属性

.zi{
    order:0;
    flex:0 1 auto;
}

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

flex属性是flex-grow（放大比例）, flex-shrink （缩小比例）和 flex-basis（所占主轴宽度比例%）的简写。

• 配合媒体查询更改flex:1 1 50%;里的百分比实现响应式