flex布局小结：
容器 （父容器，子容器）
父容器:
1.flex-direction:
row | row-reverse | column | column-reverse 决定主轴方向
flex-direction属性设置在父容器上，这样子才可以生效。
2.justify-content:
设置子元素在主轴方向的对齐方式
justify-content：flex-start | flex-end | center | space-between | space-aroud
space-evenly：均匀排列每个元素,每个元素之间的间隔相等
space-around：在左右两侧会留下边距
space-between: 在左右两侧不会留下边距
justify-content 作用的元素的子元素不要有
margin：auto 或者 margin：10px auto 等属性
3.align-items:
设置子元素在交叉轴方向的对齐方式
决定子元素在交叉轴方向上的对齐方式
align-items: flex-start | flex-end | center | stretch
strech: 如果项目未设置高度或者设为 auto，将占满整个容器的高度
这个属性是默认的
4.flex-wrap
设置换行方式
flex-wrap: wrap | nowrap | wrap-reverse
子容器：
1.flex:
flex 规定了 弹性元素 如何 伸长或缩短 以适应 flex容器 中的 可用空间。
常用简写
flex:1 —> flex:1 1 0%;
flex:auto 1 1 auto
auto 为表示项目本身的大小, 如果设置为 auto,
那么这三个盒子就会按照自己内容的多少来等比
例的放大和缩小, 会出现盒子不一样大的情况
flex 是三个属性的缩写 grow决定了 扩大比例 shrink 决定了 缩小比例 basis 决定了宽度，
flex-basis: auto 就是其本来的长度 还可以为其设置百分比 来决定其在父容器中的占比
2.align-self:
flex-start | flex-end | baseline | stretch
单独设置子容器如何排列
3.flex-grow：
设置放大比例
就是把剩余的空间按 比例 分配给子容器
默认为0，存在剩余空间不放大
如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。
4.flex-shrink:
设置缩小比例
子容器超出的部分，会按照对应的比例给子容器减去对应的值
默认为1，如果空间不足会缩小
5.flex-basis:
属性定义了在分配多余空间之前，项目占据的主轴空间（main size）
它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间
6.order:
设置排列顺序
每个子容器的order属性默认为0
通过设置order属性值，改变子容器的排列顺序
