display: 表示为伸缩容器
参考属性：
- flex |设置为容器
-
inline-flex| 行内元素设置
容器模型
flex-direction: 设置容器的方向
参考属性：
- row | 水平排列 从左往右(图3)
- column | 垂直排列 从上往下(图2)
- row-reverse | 反向水平排列 从右往左 (图4)
- column-reverse | 反向垂直 从下往上 (图1)
flex-direction
flex-wrap: 容器空间不足时是否换行显示
参考属性：
- nowrap | 不允许换行
- wrap | 换行
- wrap-reverse | 反向排序并向上换行
wrap
flex-flow: 该属性是direciton和wrap的缩写属性,是两个属性的缩写
- 默认值为row nowrap
justify-content:沿主轴对齐的方式(主轴方向参考flex-direciton属性来确定)|
参考属性：
- flex-start |从主轴起始位置对齐 (左对齐)
- flex-end | 从主轴结束位置对齐 (右对齐)
- center | 向主轴方向中间靠齐 ( 居中)
- space-between| 平均分布在主轴上 第一个view紧贴主轴起始点,最后一个view紧贴主轴结束点 (两端对齐)
-space-around| 平均分布 主轴两端不紧贴 (两端对齐但不贴边,但每个项目两侧的间隔相等)
justify-content
align-items: 对于交叉轴的位置
- flex-start | 起始对齐
- flex-end | 结束对齐
- center | 居中
- baseline | 基线对齐 也就是基于内容对齐
- stretch | 拉伸铺满
align-items
align-content: 在开启换行后,或者多行展示主轴内容后生效在交叉轴上排列的属性
- flex-start |与交叉轴的起点对齐。
- flex-end | 与交叉轴的终点对齐。
- center | 与交叉轴的中点对齐。
- space-between | 与交叉轴两端对齐，轴线之间的间隔平均分布。
- space-around | 每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
- stretch（默认值） |轴线占满整个交叉轴。
align-content
本文参考了 阮一峰的Flex 布局教程：语法篇
图片均来自阮一峰的博客
