设置flex布局：display:flex / inline-flex
flex容器属性
flex-directionflex-wrapflex-flowjustify-contentalign-itemsalign-content
| |
|---|
| row | 水平方向，从左至右排列 |
| row-reverse | 水平方向，从右至左排列 |
| column | 垂直方向，从上至下排列 |
| column-reverse | 垂直方向，从下至上排列 |
flex-wrap （当一条轴线上排列不下去之后）是否换行及换行的方式
| |
|---|
| nowrap | 默认值，不换行 |
| wrap | 换行，第一行在上方 |
| wrap-reverse | 换行，第一行在下方 |
flex-flow 是flex-direction和flex-wrap的简写。默认为row nowrapjustify-content 横向（项目在主轴）的对齐方式
| |
|---|
| flex-start | 主轴的起点对齐（左对齐） |
| flex-end | 主轴的终点对齐（右对齐） |
| center | 横向居中 |
| space-between | 两端对齐 |
| space-around | 每个项目两侧的间隔相等，项目之间的间隔比与边框的间距大一倍 |
| space-evenly | 每个元素的间距都相等 |
space-around 为什么大一倍，因为每个项目两边的间隔相等，而最左边和最右边的只挨着一个项目，中间的项目左边有一个项目右边有一个项目。
5.align-items 项目在交叉轴（y轴）上如何对齐，只有一条轴线
| |
|---|
| flex-start | 交叉轴的起点对齐（上对齐） |
| flex-end | 交叉轴的终点对齐（下对齐） |
| center | 交叉轴的中心对齐，纵向居中 |
| baseline | 项目的第一行文字的基线对齐 |
| stretch | 如果项目未设置高度或设为了auto，将占满整个容器高度 |
align-content 多根轴线的对齐方式，如果项目只有一根轴线，则不起作用。
| |
|---|
| flex-start | 与交叉轴的起点对齐 |
| flex-end | 与交叉轴的终点对齐 |
| center | 与交叉轴的中点对齐 |
| space-between | 与交叉轴两端对齐，轴线之间的间距平均分配 |
| space-around | 每根轴线两侧间隔相等，即轴线之间的间隔比轴线与边框的间隔大一倍 |
| stretch | 默认值，轴线占满整个交叉轴 |
flex项目属性
orderflex-growflex-shrinkflex-basisflexalign-self
1.order 项目的排序顺序，数值越小，排列越靠前。默认为0
2.flex-grow 项目的放大比例，默认为0，表示有剩余空间也不放大。如果所有项目的此属性都为1，则他们等分剩余空间，
3. flex-shrink 项目的缩小比例，默认为1，即如果空间不足，项目就会缩小。如果一个项目的属性为0，其余项目属性为1，空间不足时为0的项目不缩小比例。该属性不为负数。
4. flex-basis 项目的初始长度。默认为auto
| |
|---|
| number | 长度单位或百分比，规定项目的初始长度 |
| auto | 默认值，长度等于项目的长度 |
| initial | 将此属性设置为默认值 |
| inherit | 从其父元素继承此属性 |
flex 是flex-grow、 flex-shrink 、flex-basis的简写。该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。align-self 改变单个项目的对齐方式，可覆盖align-items属性。默认auto，表示继承父元素align-items的属性，如果无父元素，则等同于stretch。
| |
|---|
| flex-start | 位于容器的开头 |
| flex-end | 位于容器的末端 |
| center | 位于容器的中央 |
| baseline | 位于容器的基线位置 |
| stretch | 定位元素以适应容器 |
| auto | 默认值，继承属性 |