介绍了 flex 的各种属性和值，如果觉得看文字不过瘾，这里有动画演示
容器盒子
使用了 display: flex 后会形成一个容器盒子，里面的子元素为 item
对容器盒子进行设置
属性 — 值
- justify-content：items 在主轴上的对齐方式
- center：居中对齐
- flex-start：对齐主轴起始端
- flex-end：与 flex-start 相反
- space-between：两端对齐，items中间间隔相等
- space-around：和 space-between 类似，但是每个 item 两侧间隔相等
- align-items：items 在交叉轴（即与主轴垂直的方向）上的对齐方式
- center：居中对齐
- flex-start：对齐交叉轴起始端
- flex-end：与 flex-start 相反
- baseline：以每个 item 的第一行文字的基线对齐
- stretch：默认，若 items 没有设置 height 或设置为auto，则撑满容器
- flex-direction：设置主轴，items 在主轴上的排列方向
- row：默认，水平方向，从左开始
- row-reverse：水平方向，从右开始
- column：垂直方向，从上开始
- column-reverse：垂直方向，从下开始
- flex-wrap：换行，items 在主轴方向上是否换行
- nowrap：默认，不换行
- wrap：换行
- wrap-reverse：换行（反向）
- flex-flow：
- flex-direction 和 flex-wrap 的合写，默认值
flex-flow: row nowrap;
- flex-direction 和 flex-wrap 的合写，默认值
- align-content：
当使用了flex-wrap后，如果 items 换行了，此时会产生多个轴线，此时这个属性才会生效；
将每一行当成一个 item ，设置其在交叉轴上的对齐方式，效果类比 justify-content- flex-start：对齐交叉轴起始端
- flex-end：与 flex-start 相反
- center：居中对齐
- space-between：同理 justify-content
- space-around：同理 justify-content
- stretch：默认值，撑满容器
items
对容器内的 item 进行设置
属性 — 值
- order：定义当前 item 在整个items 里的顺序位置，值越小排在越前，可接受负数
- flex-grow：放大比例，默认为0
- flex-shrink：缩小比例，默认为1，设为0表示不缩小
- flex-basis：在分配剩余空间之前，设置 item 占据的主轴空间，默认为auto，表示 item 原始大小
- flex：
- 按flex-grow flex-shrink flex-basis 的顺序合写
- flex-grow必选参数，flex-shrink 和 flex-basis 可选
- 默认值为
flex: 0 1 auto - 快捷值：
flex: auto(1 1 auto)；flex: none(0 0 auto)
- align-self：单独设置 item 在交叉轴上的对齐方式，覆盖 align-items 的值
- auto：默认值，表示继承父元素的 align-items 的属性值
- flex-start，flex-end，center，stretch，baseline 表现与 align-items 一致
