最近，在學習一些前端知識。在學習的過程中發現會經常使用到flex布局，對這個知識點不太熟悉。因此，專門寫一篇文章來記錄一下學習歷程和心得。
本文的內容參考了網上公開的資料，其中主要參考了這兩個**：css flexible box layout module level 1和a complete guide to flexbox。
flex布局的英文是flexbox layout，也可以稱為flexible box，翻譯成中文的意思就是彈性盒子，因為聽上去總感覺怪怪的，所以一般我們都很少直接使用中文翻譯。
flex布局的目的是希望即使在容器內大小未知或者動態情況下，提供一種更有效的容器內布局、對齊和空間分配方式。換句話說，也就是flex布局賦予了容器具有能夠改變其內部的寬度、高度，甚至是順序等屬性，可以通過使用伸控制其內部的填充樣式，或者使用縮防止其溢位。
傳統的布局通常使用block和inline來表示縱向布局和水平布局。與傳統的布局相比，flex布局是一種與方向無關的布局，其優點是能夠提供更好的靈活性，同時也能夠支援一些大型的複雜布局，尤其是在其內部方向改變、大小重置、伸縮等情況。
flex布局是乙個知識體系，它包括一系列的屬性值。其中這些屬性值中有些需要被宣告在父容器上，有些需要被宣告在子條目上。乙個常規的flex布局應該宣告是flex和它的direction。**[1]給出了這樣一張圖來描述它們之間的關係：
容器中的所有子檢視只可能沿著main axis的main start到main end排列，或者是沿著cross axis的cross start到cross end排列，沒有其他情況。結合上圖，解釋一下它們的含義：
main axis
主軸是flex布局中預設的排列方式。但是，可以通過設定flex-direction來改變其排列方式。
main-start | main-end
預設的主軸排列方式是容器中的子檢視將自main-start到main-end排列。
main size
所有子檢視中的寬度的總和（包括內外布局等）就是容器的寬度。所有子檢視中的高度的總和（包括內外布局等）就是容器的高度。
cross axis
垂直於主軸的就是橫軸。橫軸始終與主軸保持垂直，其方向決定於主軸的方向。其實我們可以把上圖看成乙個羅盤，在預設情況下主軸是自西向東，那麼此時的橫軸就是自北向南。若主軸通過flex-direction屬性更改了方向，主軸不再是自西向東，而是變成了自北向南，那麼根據「橫軸始終與主軸保持垂直」，橫軸就變成了自西向東。
cross-start | cross-end
預設的橫軸排列方式是容器中的子檢視將自cross-start到cross-end排列。
cross size
子檢視的高度或者寬度就是橫軸的大小。
flex布局的屬性值有的只能在宣告在容器上，有的只能宣告在容器內的子條目上。如下圖，最外面的矩形方框是容器，容器內部的藍色背景色的方塊是子條目。
預設情況下，子條目會在一排顯示。如果需要讓其換行，可以通過這個屬性來進行控制。
這個屬性是flex-direction和flex-wrap的組合，比如我們宣告樣式時，會這樣寫：
.containerflex-flow這個屬性，我們就可以把上面兩行換成一行：
.container定義在主軸上的每排子條目的排列方式。取值有如下幾種情況：
.container定義了子條目沿著橫軸across-axis的排列方式。若想直**到效果，可以點選這裡。
.container在彈性容器內的各項沒有占用交叉軸上所有可用的空間時對齊容器內的各項（垂直）。容器內必須有多行的專案，該屬性才能渲染出效果。
.containerorder、flex-grow、flex-shrink、flex-basis、flex、align-self這幾個常用的屬性。
其值的含義與align-self類似。
[1]：a complete guide to flexbox
[2]：桃園三兄弟之：flex-grow、flex-shrink、flex-basis詳解
css中的flex布局
flex布局為 彈性盒布局 用彈性布局的方式有極大的靈活性，任何元素都可以使用flex布局，不管是行內元素或者是快級元素任何乙個容器都可以作為flex布局。box1 主軸的方向 即子元素的排序方向。橫向 反向橫向 豎向 反向豎向。flex direction row row reverse colu...
flex布局學習筆記
布局的傳統解決方案，基於盒狀模型，依賴display屬性 position屬性 float屬性。它對於那些特殊布局非常不方便，比如，垂直居中就不容易實現。新的方案 flex 布局，可以簡便 完整 響應式地實現各種頁面布局 flex flexible box 的縮寫，彈性布局，任何乙個容器都可以指定為...
Flex布局學習筆記
flex 是flexible box 的縮寫，意為 彈性布局 用來為盒狀模型提供最大的靈活性。任何乙個容器都可以指定為 flex 布局。行內元素也可以使用 flex 布局。webkit 核心的瀏覽器，必須加上 webkit字首。注意，設為 flex 布局以後，子元素的float clear和vert...