一、两个重要的概念：
1. flex container：开启了flex布局的元素
2. flex items：flex container里面的直接子元素
例如上图，红色框就是 flex container， 黑色框就是 flex items
二、display的 flex 属性和 inline-flex 属性
1. flex属性指的是将元素设置成块级元素，独占一行
2. inline-flex属性是元素设置成 行内块级元素 不会独占一行
三、flex模型常用的几个名词：
1. main axis:主轴 主轴的开始位置为main start 结束位置为main end
2.cross axis:交叉轴 交叉轴的开始位置为cross start 结束位置cross end
（注意：主轴和交叉轴位置不是固定的，根据实际情况而来）
3.mian size:主轴的大小
4.cross size：交叉轴的大小
四、 flex布局的常用属性：
1）在flex container上常用的CSS属性：
flex-direction：决定主轴的方向，默认值是row，从左到右排列；
如果值变为row-reverse，则排列变成从右到左;
如果值变为column，则排列变成从上到下;
如果值变为column-reverse，则排列变成从下到上;
flex-wrap（包裹）：默认值：nowrap（不换行）
换行显示：wrap 换行之后会对换行的元素进行上分平等占位
换行显示并翻转： wrap-reverse很少用
justify-content：决定flex items在主轴上的对其方式，
默认情况下是同主轴的开始位置对其，默认值为flex-start
同结束位置对其：
居中对其：
分散对其，flex items之间的距离相等：
等分间距，flex items之间的距离相等，边距也相等：
元素到元素之间的距离是元素到边框距离的2倍：
align-items：决定flex items在交叉轴上面的对齐方式
normal:在弹性布局中，效果和stretch一样
stretch：当flex items 在交叉轴方向的size为auto时，会自动 拉伸至填充·flex container（前提是没有给flex items设置高度）
·flex-start：与交叉轴的开始位置对齐
flex-end:与交叉轴的结束位置对齐
center:与交叉轴居中对齐
baseline：与基准线对齐（如果是多行文本，则根据第一行文本的底部作为基线）
align-content：决定多行的flex items在交叉轴上的对其方式
align-content:flex-start:以交叉轴开始对齐
align-content:flex-end:以交叉轴结束对齐
align-content:space-between:元素分开上下分部
align-content:space-around元素与元素之间空隙是元素到边距的2倍
align-content:space-evenly元素到元素到边距的距离相等
2）在 flex items上常用的CSS属性：
flex：一般不容易记住，建议看文档
当flex取值为1时，代表flex item平均占用 flex container
flex-grow：决定了flex items如何扩展
1.可以设置任意非负数字（正小数、正整数、0），默认值是0
当flex container在main axis方向上有剩余尺寸时，flex-grow属性才会生效
2. 如果所有flex items的flex-grow总和超过1，那么每个flex item扩展的尺寸为
剩余尺寸 * flex-grow/总和
3.如果所有flex items的flex-grow总和不超过1，那么每个flex item扩展的尺寸为
剩余尺寸 * flex-grow
总体意思就是用flex-grow的值乘以剩余尺寸，再加到对应的元素上
4.flex items扩展后的最终尺寸不能超过max-width/max-height
flex-basis:可以设置主轴元素的大小
他的权重大于元素自身的宽度（一般直接设置宽度）
flex-shrink(收缩)收缩的最小宽度为里面内容的宽度
默认值为1
（同flex-grow意思相同，flex-shrink的取值越高，收缩尺寸越大）
flex items收缩后的最终尺寸不能小于min-width/min-height
order：决定了flex items的排布顺序，默认值auto（很少使用）
1.可以设置任意整数（正整数、负整数、0），值越小就越排在前面
2.默认值是0
slign-self：给某个特定的元素添加对其方式
1. 遵从flex containerDe align-items设置
2. stretch、flex-start、flex-end、center、baseline，效果跟align-items一致