- 基本概念
flex是弹性盒布局模型，适用于不同尺寸屏幕中创建可自动扩展和收缩布局，通常可用于水平垂直居中、两栏、三栏布局等的场景里。
- 属性
-
flex-direction属性决定主轴方向（也就是排列方向）
row（默认）：主轴为水平方向，起点在左端
row-reverse：主轴为水平方向，起点在右端
column：主轴为垂直方向，起点在上沿
column-reverse：主轴为垂直方向，起点在下沿
-
align-items：属性定义在交叉轴上如何对齐
-
justify-content：属性定义在主轴上的对齐方式
-
flex: 1：flex属性是flex-grow,flex-shrink和flex-basis的简写，如果设置flex: 1就等于flex: 1 1 0
- flex三个值
- flex-grow：放大比例，默认为0即如果存在剩余空间也不放大。如果所有元素的flex-grow属性相等（或都为1）,将等分剩余空间如果有一个为2其他都为1那么它占据的剩余空间将比其他元素多一倍
- flex-shrink：缩小比例，默认为1即如果空间不足该元素将缩小。如果所有元素的flex-shrink属性都为1，当空间不足时都将等比例缩小。如果一个元素的flex-shrink属性为0其他都为1，则空间不足时前者不缩小。
- flex-basis：定义了在分配多余空间之前元素占据的主轴空间。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto即项目的本来大小。
-
子元素都设置flex: 1宽度是否一样？
flex: 1,元素占的主轴空间为0所以平分，但是如果有padding属性元素占的地方会增加，如果有margin的话元素的宽度不变内容content会变小。
-
flex实现三栏布局
左右合子设置：flex: 0 1 200px,中间盒子设置：flex: 1,父元素设置： display: flex
