概念
Flex布局是CSS3引入的一种弹性布局，能够方便、快速、灵活地对容器内的子元素进行排列、对齐。它使用了CSS3的新属性，包括flex-wrap、flex-direction、flex、justify-content等，使得布局变得更加简单和直观。
Flex布局的基本组成部分有两个：容器（flex-container）和项目（flex-item）。容器表示一组子元素，是项目的父元素,使用display: flex或display: inline-flex可以声明一个容器；项目则是容器里的个体，就是子元素。如下图所示：
容器常用属性
display: flex / display: inle-flex
display: flex 或 display: inline-flex：将容器设置为Flex布局。
.box{
display: flex;
}
行内元素也可以使用Flex布局。
.box{
display: inline-flex;
}
注意：Webkit内核的浏览器，必须加上-webkit前缀。
.box{
display: -webkit-flex; /\* Safari \*/
display: flex;
}
当为某个元素设置Flex布局以后，子元素的float、clear 和 vertical-align 属性将失效。
flex-direction
flex-direction：决定主轴的方向（即项目的排列方式），其取值如下
- “row”（默认值，水平方向）
- “column”（垂直方向）
- “row-reverse”（水平方向反转）
- “column-reverse”（垂直方向反转）
flex-direction: row | row-reverse | columm | column-reverse
效果如下：
flex-wrap
flex-wrap：决定项目在主轴上是否换行，其取值如下：
- “nowrap”:（默认不换行/列）。
- “wrap”：主轴为横向时,从上到下换行。主轴为纵向时：从左到右换列。
- “wrap-reverse”：主轴为横向时,从下到上换行。主轴为纵向时：从右到左换列。
flex-wrap:wrap | nowrap | wrap-reverse
效果图如下
flex-flow
flex-flow:是flex-direction属性和flex-wrap属性的简写属性，默认值为“row nowrap”
justify-content
justify-content：定义了沿着主轴（默认是水平轴）的对齐方式，其取值如下： “flex-start”（默认值，左对齐） “flex-end”（右对齐） “center”（居中对齐） “space-between”（两端对齐，项目之间的间隔相等） “space-around”（每个项目的左右间隔相等，项目之间的间隔是前一个项目的间隔的2倍）。
justify-content:flex-start | center | flex-end | space-between | space-around
效果图如下：
align-items
align-items：定义了沿着交叉轴（默认是垂直轴）的对齐方式,其取值如下：
- “flex-start”（交叉轴起点对齐）
- “flex-end”（交叉轴终点对齐）
- “center”（交叉轴居中对齐）
- “baseline”（基线对齐）
- “stretch”（默认值，如果子项目没有设置高度，则在交叉轴方向上占据整个空间）
align-items:flex-start | center | flex-end | baseline | stretch
效果图如下：
项目常用属性
flex-grow
flex-grow：定义项目的放大比例，当容器有剩余空间时，根据项目的放大比例来分配。默认值为0，表示不放大。
flex-grow: number
flex-shrink
flex-shrink：定义项目的缩小比例，当容器空间不足时，根据项目的缩小比例来分配。默认值为1，即如果空间不足，会缩小该项目。
flex-shrink: number
flex-basis
flex-basis：定义项目的基准宽度，即在分配容器空间前，项目占据的空间。默认值为auto，即项目的内容决定其大小。
flex
flex：是flex-grow、flex-shrink和flex-basis三个属性的缩写，可以用来快捷设置这三个属性的值。默认值为“0 1 auto”，即在空间不足时，会缩小项目，但是不会放大。
flex: flex-grow flex-shrink flex-base;
order
order：定义项目的排列顺序，数值越小越靠前。默认值为0，表示按照代码顺序排列。
order: number
align-self
align-self：定义项目在交叉轴上的对齐方式，覆盖容器的align-items属性。该属性可以取值为flex-start、flex-end、center、baseline和stretch。
align-self: flex-start | center | flex-end | baseline | stretch
