flex布局基础

==================容器的属性====================

display:flex; 设置布局为伸缩布局

flex-direction flex布局的主轴方向 值为 row，column，row-reverse，column-reverse;默认为row横向排列

flex-wrap 子项目是排列在一行是是允许换行 nowrap, wrap, wrap-reverse;默认不换行

flex-flow 是flex-direction 和 flex-wrap的简写 默认是 row nowrap；

justify-content 定义主轴上的排列方式 （如果主轴是x轴，下面的意思是）
1）flex-start 左对齐
2）flex-end 右对齐
3）center 居中对齐
4）space-between 两端对齐，顶住两端
5）space-around 分散对齐，每一项左右两边间距相等，不顶住两边

align-items 交叉轴上的对齐方式 （如果交叉轴为y轴，下面的意思是）
1）flex-start 上对齐
2）flex-end 下对齐
3）center 居中对齐
4）baseline 项目的第一行文字基线对齐
5）stretch 子项全部伸展开

align-content 定义了多根轴线的对齐方式，如果只有一个轴线，该属性没用（我没用过）

=================项目的属性=============
order：子项的排列顺序，越小的在前面，默认为0
flex-grow：项目的放大比例，默认为0，不放大，所有子项flex-grow都为1，将剩余空间等分
flex-shrink：项目的缩小比例，默认为1，空间不足等比缩小
flex-basis：在分配剩余空间前，项目占有的主轴空间。默认值为auto，根据这个算剩余空间

flex: 是flex-grow、flex-shrink、flex-basis的缩小，默认值是0 1 auto
flex:auto 1 1 auto
flex:none 0 0 auto

align-self: 允许该子项与其他项对齐方式不同，默认为auto，表示继承父级的align-items
如果没有align-items，auto等同于stretch
0）auto
1）flex-start 上对齐
2）flex-end 下对齐
3）center 居中对齐
4）baseline 项目的第一行文字基线对齐
5）stretch 子项全部伸展开