Flex基本概念
示例图
Flex容器
实现Flex布局需要先指定一个容器，任何一个容器都可以被指定为Flex容器，内部元素就可以使用Flex来进行布局。
.container {
display: flex;
}
flex-direction方向
容器内部的元素排列方向，有以下四种方向：
- row，水平方向，从左到右排列子元素
- row-reverse，水平方向，从右到左排列子元素
- column，竖直方向，从上到下排列子元素
- column-reverse，竖直方向，从下到上排列子元素
flex-direction定义了容器的主轴方向，对应的还有一个与之垂直的交叉轴
flex-wrap 换行
当容器主轴方向尺寸固定时，如果子元素的总宽度超出时，会根据这个属性决定是否换行显示。有三个可选值：
- nowrap，不换行，显示不下，则压缩子项目的大小
- wrap，换行显示，显示不下时，换到下一行显示
- wrap-reverse，换行显示，但是第一行在最下方
justify-content 主轴上子元素的对齐方式
- flex-start，主轴头部对齐
- flex-end，主轴尾部对齐
- center，主轴居中
- space-between，两端对齐，子元素之间间隔相等
- space-around，子项目之间距离相等，两端距离是中间距离的一半
align-items 交叉轴上子元素的对齐方式
- stretch，拉伸子元素，交叉轴的尺寸与容器一致
- flex-start，子元素在交叉轴顶部对齐
- flex-end，子元素在交叉轴底部对齐
- center，子元素在交叉轴中点对齐
- baseline，以文字的底部对齐
align-content
当flex-wrap设置为wrap时，可能会存在多根主轴，只有这种情况下，这个属性才会起作用。属性值有下面几种：
- stretch，拉伸，每根轴平分交叉轴的尺寸
- flex-start，交叉轴上起点对齐
- flex-end， 交叉轴终点对齐
- center，交叉轴中间对齐
- space-between，轴线两端对齐，中间间隔相等
- space-around，中间间隔相等，两端间隔是中间间隔一半
Flex子元素
在flex容器里面的都属于子元素。
order
定义在容器里的排列顺序，数值越小，排列越靠前，可以修改HTML的结构。
flex-basis
设置在主轴上的大小，默认auto，根据子元素自身设置的大小。如果设置了数值时，自身设置的大小就失效，flex-basis需要跟flex-grow和flex-shrink配合使用才能发挥效果。
flex-grow
子元素的放大比例，默认值为0，即使存在剩余空间也不放大。
当容器内所有与的子元素以flex-basis的值进行排列后，如果仍有剩余空间，那么将根据flex-grow再平分剩余空间
flex-shrink
跟grow相反，让容器空间不足时，对子元素进行大小压缩。
flex
flex-basis，flex-grow，flex-shrink三个属性的组合
flex属性如果指定的是一个数字，那么指定的是grow，如果是一个百分数或者px值，那么是basis。
同一时间，flex-grow和flex-shrink只有一个能起作用，空间足够是flex-grow发挥作用，空间不足时，flex-shrink发挥作用。
align-self
定义自己的对齐方式，优先级高于容器中的align-items
参考链接:30 分钟学会 Flex 布局
