详解flex布局设计
Flex布局
Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为 Flex 布局。
.row{
display: flex;
}
注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。
采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
Flex属性介绍
1. flex-direction属性
flex-direction属性决定主轴的方向（即元素的排列方向）。
取值：flex-direction: row | row-reverse | column | column-reverse;
1.1 flex-direction:row（默认，即主轴为水平方向，起点在左端。）
1.2 flex-direction:row-reverse主轴为水平方向，起点在右端。
1.3 flex-direction:row-column主轴为垂直方向，起点在上方。
1.4 flex-direction:column-reverse主轴为垂直方向，起点在下方。
2. flex-wrap属性
默认情况下，元素都排在一条线（又称"轴线"）上。
flex-wrap属性决定主轴如何换行。
取值：flex-wrap: nowrap | wrap | wrap-reverse;
2.1 flex-wrap:nowrap（默认，即不会自动换行。）
Tips：第四个元素没有换行，已经溢出父元素。
2.2 flex-wrap:wrap（元素撑满后自动换行。）
Tips：第四个元素自动换行。flex-wrap:wrap-reverse为自动换行，但第一行会在下面，对比flex-wrap:wrap有反效果。
3. justify-content属性
justify-content属性定义了元素在主轴上的对齐方式。
取值：justify-content: flex-start | flex-end | center | space-between | space-around;
3.1 justify-content:flex-start（默认，即左对齐。）
3.2 justify-content:flex-end（右对齐。）
3.3 justify-content:center（居中对齐。）
3.3 justify-content:between（两端对齐，元素之间的间隔都相等。）
3.4 justify-content:around（每个元素两侧的间隔相等。）
4. align-items属性
align-items属性定义了元素在交叉轴上如何对齐。
取值：align-items: flex-start | flex-end | center | baseline | stretch;
4.1 align-items:flex-start （交叉轴的起点对齐，即上方。）
flex-item2
flex-item3
flex-item3
4.2 align-items:flex-end （交叉轴的终点对齐，即下方。）
flex-item2
flex-item3
flex-item3
4.3 align-items:flex-center （交叉轴的中点对齐。）
flex-item2
flex-item3
flex-item3
4.4 align-items:flex-baseline（元素第一行文字的基线对齐。）
flex-item2
flex-item3
flex-item3
4.5 align-items:flex-stretch（默认值，如果元素未设置高度或设为auto，将占满整个容器的高度。）
flex-item2
flex-item3
flex-item3
5. align-content属性
align-content属性定义了多根轴线的对齐方式。如果元素只有一根轴线，该属性不起作用
取值：align-content: flex-start | flex-end | center | space-between | space-around | stretch;
5.1 align-content:flex-start （与交叉轴的起点对齐。）
5.2 align-content:flex-end （与交叉轴的终点对齐。）
5.3 align-content:center （与交叉轴的中点对齐。）
5.4 align-content:space-between （与交叉轴两端对齐，轴线之间的间隔平均分布。）
5.5 align-content:space-around （每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。）
5.6 align-content:stretch （轴线占满整个交叉轴。）
通过下面的例子，你可以尝试更改样式以查看效果。