一、基本概念
1.1 什么是 Flex 布局
flex 就是 Flexible Box 的缩写，意思就是弹性盒子布局的意思。
1.2 Flex 布局的主要作用
- 解决元素居中问题
- 自动弹性伸缩，合适适配不同大小的屏幕，和移动端
1.3 Flex 布局的简单介绍
Flex 布局就是规定 Flex 盒子里面元素横向和纵向的对齐方式和伸缩方式。
二、盒子容器 Container 的属性
flex-direction: 主轴方向
flex-wrap: 主轴一行满了换行
flex-flow: flex-direction 和 flex-wrap 的组合
justify-content: 主轴元素对齐方式
align-items: 交叉轴元素对齐方式//单行
align-content: 交叉轴行对齐方式//多行
2.1 flex-direction
flex-direction 用来设置主轴方向，即决定元素的布局方向：
row: （默认值）主轴为水平方向，起点在左端。
row-reverse: 主轴为水平方向，起点在右端。
column: 主轴为垂直方向，起点在上沿。
column-reverse: 主轴为垂直方向，起点在下沿。
2.2 flex-wrap
flex-wrap 主轴一行满了换行
nowrap: (默认值) 不换行压缩宽度
wrap: 换行
wrap-reverses: 反向换行
2.3 flex-flow
flex-low: [flex-direction] [flex-wrap]
2.4 justify-content
justify-content 主轴元素对齐方式，这里是元素的对齐，区别于刚刚的「方向」
flex-start: 默认，靠着main-start对齐//参考常见术语(一般是左方向)
flex-end: 靠着main-end对齐//参考常见术语(一般是右方向)
center: 靠着主轴居中对齐//一般就是居中对齐
space-between: 两端对齐，靠着容器壁，剩余空间平分
space-around: 分散对齐，不靠着容器壁，剩余空间在每个项目二侧平均分配
space-evenly: 平均对齐，不靠着容器壁，剩余空间平分
2.5 align-items
flex-start: 交叉轴的起点对齐。
flex-end: 交叉轴的终点对齐。
center: 交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch: （默认值）伸展，如果项目未设置高度或设为auto，将占满整个容器的高度。
2.6 align-content
align-content 交叉轴行对齐方式多行;
flex-start: (每一行)(默认)靠着cross-start对齐//参考常见术语(一般是左方向)
flex-end: （每一行)靠着cross-end对齐//参考常见术语(一般是右方向)
center: (每一行)靠着cross线居中对齐//一般就是居中对齐
space-between: (每一行)两端对齐，靠着容器上下壁，剩余空间平分
space-around: (每一行)分散对齐，不靠着容器壁，剩余空间在每个项目二侧平均分配
strentch: (每一行)伸缩，占满整个高度
三、对于元素的属性
flex-grow: 伸展
flex-shrinik: 缩小
align-self: 覆盖container align-items 属性
order: 排序
flex-basis: 有效宽度
3.1 flex-grow
flex-grow 用来设置当前项目分配主轴剩余空间的比例，剩余空间是容器的大小减去所有元素的大小，若所有元素的定义的 flex-grow 相同，则剩余空间等比分配，否则由其定义的比例进行分配。
3.2 flex-shrinik
flex-shrinik 和 flex-grow 刚好相反，该属性指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。
默认值为 1，若想在空间不足时不被缩小可以设置 flex-shrinik:0, flex 元素将保持原始尺寸
3.3 align-self
align-self 用来定义 flex 元素的对齐方式。将覆盖容器的 align-items 属性值。取值如下：
auto：默认值，继承 align-items 属性值
flex-start：与交叉轴起始线对齐
flex-end：与交叉轴终止线对齐
center：与交叉轴中间线对齐: 居中对齐
stretch：在交叉轴方向上拉伸
baseline：与基线对齐(与内容相关用得极少)
3.4 order
order 定义 flex 元素的排列顺序。
3.5 flex-basis
flex-basis 用来设置 flex 元素的占用空间，将覆盖 width 设置的值。
