CSS flex

Flexible Box 模型，通常被称为 flexbox.

主轴与交叉轴：默认主轴为水平方向，从左往右。由flex-direction控制，可以取四个值：

• row        主轴为水平方向，从左往右。
• row-reverse   主轴为水平方向，从右往左。
• column      主轴为竖直方向，从上往下。
• column-reverse 主轴为竖直方向，从下往上。 

主轴确定，那么交叉轴即为与主轴垂直的另一条轴。

flex-wrap 定义轴线排不下所有元素，该如何换行。

1. nowrap（默认）：不换行。将元素硬塞在轴线。
2. wrap：换行，第一行在上方。
3. wrap-reverse：换行，第一行在下方。

 

（小tips：在换行后，需要aligin-content来控制）

接下来就是一些对齐相关的属性

• justify-content- 控制主轴上所有 flex 项目的对齐。
• align-items - 控制交叉轴上所有 flex 项目的对齐。
• aligin-self- 控制交叉轴上的单个 flex 项目的对齐。
• align-content- 控制“多条主轴”的 flex 项目在交叉轴的对齐。

---

align-items

• align-items: flex-start flex 项目的开始端的对齐
• align-items: flex-end flex 项目的结束端对齐
• align-items: center flex 项目居中对齐
• align-items: stretch flex 项目撑满 flex 容器
• align-items: baseline flex 项目的基线对齐

align-self 给单个flex项目设置对齐属性，其拥有 align-items 的所有属性值，另外还有一个 auto 能重置自身的值为 align-items 定义的值。

---

 justify-content 

• align-content: flex-start
• align-content: flex-end
• align-content: center
• align-content: space-between
• align-content: space-around
• align-content: stretch

---

 align-content 与justify-content属性值一样

• align-content: flex-start
• align-content: flex-end
• align-content: center
• align-content: space-between
• align-content: space-around
• align-content: stretch

  ---

  ---

  flex项排序

order属性  （从主轴开始从小到大）

 控制flex子元素在主轴上的比例

• flex-grow: 这个flex子元素得到（伸张）多少positive free space?
• flex-shrink: 从这个flex子元素要消除（收缩）多少negative free space?
• flex-basis: 在flex子元素未伸张和收缩之前，它的大小是多少?

......