筆記：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...