CSS - flex

• 只有主轴和交叉轴，没有横竖之分

  display: flex | inline-flex;

inline-flex 就是 类似于 inline-box 的感觉，对外表现像一个行内元素
父元素设为flex布局后，子元素float属性会失效
项目默认沿主轴排列

容器的属性

flex-direction: row | row-reverse | column | column-reverse;
决定主轴的方向，也就是项目的排列方向，默认值 row

flex-wrap: nowrap | wrap | wrap-reverse;
决定如何换行，不换行的时候会把子元素的尺寸压缩，默认值 nowrap

justify-content: flex-start | flex-end | center | space-between | space-around;
决定项目在主轴上的对齐方式，默认值 flex-start

align-items: flex-start | flex-end | center | baseline | stretch;
决定项目在交叉轴上的对齐方式，默认值 stretch / normal
容器有高度，子元素没高度时，项目在交叉轴上拉伸
stretch 会使交叉轴上的尺寸（宽度或高度）拉伸

align-content: flex-start | flex-end | center | space-between | space-around | stretch;
定义主轴多行或多列之间的对齐方式，类似 align-items

子元素的属性

order: <integer>;
数值越小，排列越靠前，默认是0
flex-grow: <number>;
定义项目的放大比例，默认是0，不放大
分的是主轴上的剩余空间
如果项目中只有一个设置了大于0的值，则该项获得所有剩余空间
如果多个项目设置了大于0的值，则根据值的大小获得剩余空间的份数
flex-shrink: <number>;
项目的缩小比例，默认是1，值为0时不缩小，负值无效
这个属性控制的是项目在主轴方向上的尺寸变化，交叉轴上的空间不够时项目不缩小
不同的数值表示在自身的大小上缩小的份数，分母计算得来：
2/x * 200 + 1/x * 4 * 150 = 200 得出 x = 5

flex-basis: <length> | auto; /* default auto */
定义项目在主轴上的尺寸，推荐使用它代替直接设置主轴上的宽度或高度，因为width 或 height 相当于间接地使 flex-basis 起作用
align-self: auto | flex-start | flex-end | center | baseline | stretch;
等同于align-items，用于设置单个项目在交叉轴上的对齐方式