flex布局

flex-direction: row | row-reverse | column | column-reverse
决定主轴方向，(正反)排列顺序
row：横行排列
row-reverse：反向横行排列

flex-wrap: no-wrap | wrap | wrap-reverse
一行排不下时是否换行:
wap： 换行，第一行在最上面；
wrap-reverse：换行，从最下面开始排序

justify-content：flex-start | flex-end | center | space-between | space-around
决定了item在横(主)轴上的对齐方式

align-items：flex-start | flex-end | center | base-line | stretch
决定了item在纵(交叉)轴上的对齐方式
base-line：项目的第一行文字的基线对齐。
stretch：如果项目未设置高度或设为auto，将占满整个容器的高度。

---

下面两个不必强记
flex-flow：flex-direction 和 flex-wrap两个属性的简写形式
flex-flow: column no-wrap; // 纵向排列 不换行的意思

align-content：flex-start | flex-end | center | space-between | space-around | stretch
多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

---

水平垂直居中

在父元素上设置

{
  dispaly: flex;
  justify-content: center;
  align-items: center;
}

上面是container容器的属性
下面是item属性

image.png

flex-grow: 增长比例 空间过多时 默认值0 mdn flex-grow

flex-grow

flex-shrink: 收缩比例 空间不够时 默认值1 mdn flex-shrink

flex-shrink

flex-base: 自己设置宽度，一般不用
flex: 上面三个的缩写
order: 顺序(代替双飞翼)
align-self：自身的对齐方式（假如，container align-items: flex-end,）则可以强制设置 align-self: center 居中显示

order: 每个子元素设置一个order属性，则可以自定义顺序。

参考:
1. Flex 布局教程：语法篇
2. Flexbox演示站
3. CSS杂谈 - flex布局