⚠️1.1萬長文⚠️ React源碼並非洪水猛獸，知道方法，就可以很輕易地馴服它(=^▽^=)。文章基於最新的React源碼進行調試及閱讀，將以通俗地方式解讀React ...
flex 盒子模式
只要在一個元素的 CSS 中添加 display: flex;，就可以使用其它 flex 屬性來構建響應式頁面了。
#box-container {
display: flex;
}
行，列 Row Culomn
給元素添加 display: flex 屬性可以讓它變成 flex 容器， 然後可以讓元素的項目排列成行或列。 只要給父元素添加 flex-direction 屬性，並把屬性值設置為 row 或 column，即可橫向排列或縱向排列它的所有子元素。 創建一行將使子項水平對齊，創建一列將使子項垂直對齊。
flex-direction 的其他可選值還有 row-reverse 和 column-reverse。
註意： flex-direction 的預設值為 row。
#box-container {
display: flex;
flex-direction: row;
/* flex-direction: column */
}
父元素對齊 Align
子元素排列的方向被稱為 main axis（主軸）。 對於行，主軸水平貫穿每一個項目； 對於列，主軸垂直貫穿每一個項目。
對於如何沿主軸線排放 flex 項目，有幾種選擇。 很常用的一種是 justify-content: center;：即 flex 子元素在 flex 容器中居中排列。 其他選擇包括：
-
flex-start：從 flex 容器的起始位置開始排列項目。 對行來說是把項目移至左邊， 對於列是把項目移至頂部。 如未設置justify-content的值，那麼這就是預設值。 -
flex-end：從 flex 容器的終止位置開始排列項目。 對行來說是把項目移至右邊， 對於列是把項目移至底部。 -
space-between：項目間保留一定間距地沿主軸居中排列。 第一個和最後一個項目被放置在容器邊沿。 例如，在行中第一個項目會緊貼著容器左邊，最後一個項目會緊貼著容器右邊，然後其他項目均勻排布。 -
space-around：與space-between相似，但頭尾兩個項目不會緊貼容器邊緣，所有項目之間的空間均勻排布。 -
space-evenly：頭尾兩個項目不會緊貼容器邊緣，所有項目之間的空間均勻排布。
#box-container {
justify-content: center;
}
Flex 容器中，與主軸垂直的叫做 cross axis（交叉軸）。 行的交叉軸是垂直的，列的交叉軸是水平的。
CSS 中的 align-items 屬性用來定義 flex 子元素沿交叉軸的對齊方式。 對行來說，定義的是元素的上下對齊方式； 對列來說，是定義元素的左右對齊方式。
align-items 的可選值包括：
-
flex-start：從 flex 容器的起始位置開始對齊項目。 對行來說，把項目移至容器頂部； 對列來說，是把項目移至容器左邊。 -
flex-end：從 flex 容器的終止位置開始對齊項目。 對行來說，把項目移至容器底部； 對列來說，把項目移至容器右邊。 -
center：把項目居中放置。 對行來說，垂直居中（項目距離頂部和底部的距離相等）； 對列來說，水平居中（項目距離左邊和右邊的距離相等）。 -
stretch：拉伸項目，填滿 flex 容器。 例如，排成行的項目從容器頂部拉伸到底部。 如未設置align-items的值，那麼這就是預設值。 -
baseline：沿基線對齊。 基線是文本相關的概念，可以認為它是字母排列的下端基準線。
#box-container {
align-items: center;
}
換行 Wrap
CSS flexbox 有一個把 flex 子元素拆分為多行（或多列）的特性。
預設情況下，flex 容器會調整項目大小，把它們都塞到一起。 對於行來說，所有項目都會在一條直線上。
不過，使用 flex-wrap 屬性可以使項目換行展示。 這意味著多出來的子元素會被移到新的行或列。 換行發生的斷點由子元素和容器的大小決定。
換行方向的可選值有這些：
-
nowrap：預設值，不換行。 -
wrap：如果排列以行為基準，就將行從上往下排列；如果排列以列為基準，就將列從左往右排列。 -
wrap-reverse：如果排列以行為基準，就將行從下往上排列；如果排列以列為基準，就將列從右往左排列。
#box-container {
flex-wrap: wrap;
}
收縮 Shrink
上面提到的屬性都是應用於 flex 容器（flex 子元素的父元素）的。 除此之外，flex 子元素也有很多實用屬性。
首先介紹的是 flex-shrink 屬性。 使用之後，如果 flex 容器太小，則子元素會自動縮小。 當容器的寬度小於裡面所有子元素的寬度之和時，所有子元素都會自動壓縮。
子元素的 flex-shrink 接受數值作為屬性值。 數值越大，則該元素與其他元素相比會被壓縮得更厲害。 比如，一個項目的 flex-shrink 屬性值為 1，另一個項目的 flex-shrink 屬性值為 3，那麼後者相比前者會受到 3 倍壓縮。
#box-1 {
flex-shrink: 1;
}
#box-2 {
flex-shrink: 2;
}
擴大 Grow
與 flex-shrink 相對的是 flex-grow。flex-grow會在容器太大時對子元素作出調整。
如果一個項目的 flex-grow 屬性值為 1，另一個項目的 flex-grow 屬性值為 3，那麼值為 3 的一個會較另一個擴大 3 倍。
#box-1 {
flex-grow: 1;
}
#box-2 {
flex-grow: 2;
}
初始大小 Basis
flex-basis 屬性定義了在使用 CSS 的 flex-shrink 或 flex-grow 屬性對元素進行調整前，元素的初始大小。
flex-basis 屬性的單位與其他表示尺寸的屬性的單位一致（px、em、% 等）。 如果值為 auto，則項目的尺寸隨內容調整。
#box-1 {
flex-basis: 10em;
}
#box-2 {
flex-basis: 20em;
}
簡寫 Shorthand
上面幾個 flex 屬性有一個簡寫方式。 flex-grow、flex-shrink和 flex-basis 屬性可以在 flex中一併設置。
例如，flex: 1 0 10px; 會把項目屬性設為 flex-grow: 1;、flex-shrink: 0; 以及 flex-basis: 10px;。
屬性的預設設置是 flex: 0 1 auto;。
#box-1 {
flex: 2 2 150px;
}
#box-2 {
flex: 1 1 150px;
}
重新排列 Rearrange
order 屬性告訴 CSS flex 容器裡子元素的順序。 預設情況下，項目排列順序與源 HTML 文件中順序相同。 這個屬性接受數字作為參數，可以使用負數。
#box-1 {
order: 2;
}
#box-2 {
order: 1;
}
子元素對齊方式 Align
align-self。 這個屬性允許調整單個子元素自己的對齊方式，而不會影響到全部子元素。 因為 float、clear 和 vertical-align 等調整對齊方式的屬性都不能應用於 flex 子元素，所以這個屬性顯得十分有用。
align-self 可設置的值與 align-items 的一樣，並且它會覆蓋 align-items 所設置的值。
#box-1 {
align-self: center;
}
#box-2 {
align-self: flex-end;
}
