笔记：flex 的完备性与正交性

笔记：

flex 布局很容易与其他布局方式（包括 flex 布局）嵌套在一起，实际上它是一个独立的盒子，这个盒子由一个元素（称为容器）及其直接的子元素（称为项目）构成。这个容器外部以及这些项目内部都不会受 flex 布局的影响。

一个元素可以定义成两种 flex 布局，第一种是块级 flex 布局：

.flex-block-box {
  display: flex;
}

另一种是行内 flex 布局：

.flex-inline-box {
  display: inline-flex;
}

这两种 flex 布局的区别是，块级 flex 布局的容器是一个块级盒子（block），而行内 flex 布局的容器是一个行内盒子（inline-block）。

容器的属性主要用于排列和对齐项目，项目的属性主要用于实现弹性和覆盖容器所定义的对齐方式：

1. 容器属性：

   1. 排列：

      • 方向：flex-direction: row | column | row-reverse | column-reverse

      • 换行：flex-wrap: nowrap | wrap | wrap-reverse

      • 合写：flex-flow: row nowrap

   2. 对齐：

      • justify-content: flex-start | center | flex-end | space-between | space-around

      • align-items: flex-start | center | flex-end | baseline | stretch

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

2. 项目属性：

   1. order: 0 | 1 | ...

   2. 控制弹性：

      • flex-grow: 0 | 1 | ...

      • flex-shrink: 0 | 1 | ...

      • flex-basis: auto | 100px | 50% | ...

      • flex: 0 1 auto

        • auto: 1 1 auto

        • none: 0 0 auto

        • initial: 0 1 auto

   3. align-self: auto | flex-start | center | flex-end | baseline | stretch

---

另参见：http://www.ruanyifeng.com/blo...

---

---

---

---

---

---

---

---