容器的属性：
flex-direction 调整主轴
- 默认为row，即横向向右排列
- row-reverse 横向从右向左排列
- column 纵轴为主轴，从上到下
- column 纵轴为主轴，从下到上
flex-wrap 控制换行
- nowrap，默认，不换行
- wrap，换行，会将侧轴的空间等分
- wrap-reverse 换行、反向
flex-flow 复合属性
- flex-flow: direction wrap
justify-content 项目在主轴上的排列顺序
- flex-start 在主轴的起点(比如没有设置反向时是贴着左、上，若设置了反向即贴着右、下)
- flex-end 贴着主轴末尾
- center 项目居中
- space-around 将剩余空间等分，分给每一个项目左右两边
- space-between 将剩余空间等分，第一个和最后一个项目会贴着主轴的开始和结尾
- space-evenly 将剩余空间等分，所有项目间距相同
align-items 项目在侧轴的排列顺序
- flex-start 项目在侧轴的开始
- flex-end 项目在侧轴的结尾
- center 项目在侧轴的中间
- stretch 项目在侧轴上没有宽/高时，变为100%
给父元素添加
display:flex;
justify-content: center;
align-items: center;
即可实现项目的完全居中
align-content 换行项目的对齐
- flex-start 换行的项目紧挨上面的元素，且位于侧轴flex-start位置
- flex-end 换行项目紧挨上面元素，位于侧轴flex-end位置
- center 换行项目紧挨上面元素，位于侧轴中间
- space-around 将侧轴剩余空间等分，添加到项目行的上下两边
- space-between 将侧轴的剩余空间等分，第一行和最后一行紧挨容器侧轴两侧
项目的属性：
flex-grow 放大(利用剩余空间)
- 放大后的宽度：本身宽度+剩余宽度/所有项目grow值的和×项目本身grow值
- 如果没有剩余宽度，grow无效
- 默认grow值为0
flex-shrink 压缩
- 默认值为1
- 项目宽度=本身宽度-超出宽度/shrink总值×本身shrink值
- 如果一行里的项目没有超出，那么shrink无效
flex-basis 项目在主轴上占的空间
flex 复合属性
- flex：grow shrink basis
- 默认值：flex：0 1 auto
align-self 项目在侧轴上的位置
- flex-start 在侧轴起始
- flex-end 在侧轴末尾
- center 在侧轴中间
order 设置项目顺序
