彈性佈局示例

原文章地址
https://css-tricks.com/snippe...
根據原文章翻譯並添加本身的理解，有不對的歡迎指正。

彈性佈局-背景

Flexbox Layout（Flexible Box）模塊（目前爲W3C Last Call Working Draft）旨在提供一種更有效的方式來佈置，對齊和分配容器中的項目之間的空間，即便其尺寸未知和/或動態（所以單詞「flex」）。

Flex佈局背後的主要思想是賦予容器更改其項目的寬度/高度（和順序）以最好地填充可用空間（主要適應各類顯示設備和屏幕大小）的能力。彈性容器可擴展項目以填充可用空間，或縮小它們以防止溢出。

最重要的是，flexbox佈局與方向無關，而不是常規佈局（基於垂直方向的塊和基於水平方向的內聯塊）。雖然這些工做對於頁面頗有效，但它們缺少靈活性（無雙關語）來支持大型或複雜應用程序（尤爲是在改變方向，調整大小，拉伸，縮小等方面）。
注意：Flexbox佈局最適合應用程序的組件和小型佈局，而網格佈局適用於大型佈局。

基礎知識和術語

因爲flexbox是一個完整的模塊，而不是一個單獨的屬性。是一個屬性集合，是用於設置容器和容器內各個子項目的屬性集合。其中一些是爲了在容器上設置（父元素，稱爲「flex容器」），而其餘的則是爲了在子item上設置（稱爲「flex items」）。

若是常規佈局基於塊流向和內聯流向，則佈局基於「彈性流動方向」。請從規範中查看這個數字，解釋flex佈局背後的主要思想。

基本上，項目將按照main axis（從main start 到 main end）或cross axis（從cross start 到 cross end）佈置。

交叉軸是與主軸垂直的那條軸線，之因此不稱之爲橫軸|縱軸，是由於主軸不必定是水平的，有水平和垂直兩種，而交叉軸則是與主軸老是垂直的關係。

• main axis（主軸）:

彈性容器的主軸是彈性項目佈局的主要軸,子項目默認按照主軸排列。小心，它不必定是水平的;它取決於彈性方向屬性flex-direction（見下文）。

• main-start | main-end:

主軸與容器的有兩個交叉點，一個是起始點一個是結束點。判斷哪一個是起始點，主要看彈性佈局的流動方向。e.g. 若是flex-direction: row; 那麼main start就是主軸與容器交叉的左側的點， 那麼main end就是主軸與容器交叉的右側的點，彈性佈局中共子項是按照從起始點到結束點的方向排列的。

• main size:

彈性容器的寬度或高度，以main size爲準，是container的主尺寸。 Flex項目的main size 屬性是「寬度」或「高度」屬性，以主維度中的哪個爲準。

• cross axis:

垂直於main axis的軸稱爲交叉軸。它的方向取決於main axis的方向。

• cross-start | cross-end:

交叉軸與容器有也有兩個交點，若是flex-direction：row; 那麼頂部的點就是cross-start,底部的點就是cross-end

• cross size:

彈性容器的寬度或高度，覺得cross size爲準，是item的交叉尺寸。cross size屬性是交叉維度中的「寬度」或「高度」中的任何一個。

容器的屬性：

display

diplay定義了一個flex容器;內聯或塊取決於給定的值。它爲全部直接的子項目提供了一個彈性環境。

display: flex; /* inline-flex */

請注意，CSS列對flex容器沒有影響。

flex-direction 彈性佈局的流動方向

容器內子項目的排列方式。四個取值 row（默認）、column、row-reverse、column-reverse
row：橫向
column： 縱向
row-reverse： 橫向倒序
column-reverse： 縱向倒序

flex-wrap 是否換行

默認子項目排列爲一行，此屬性規定是否要換行，如何換行。三個取值 nowrap（默認）、wrap、wrap-reverse
nowrap： 不換行 從 main-start 排到 main-end 不換行，而且容器可能溢出
wrap：換行 項目排序 從 main-start 排到 main-end
wrap-reverse：換行、從 main-end 排到 main-start

flex-flow

該屬性是一個複合屬性，取值爲兩個值，第一個值是flex-direction, 第二個值是flex-wrap。
默認是flex-flow：row nowrap；

justify-content

items在主軸（main axis）上的對齊方式。取值有flex-start（默認）、 flex-end、center、space-between、 space-around。
flex-start： 主軸的start方向對齊，即 main-start方向對齊
flex-end： 主軸的end方向對齊，即 main-end 方向對齊
center: 主軸方向居中對齊
space-between: 主軸方向兩端對齊,items之間間隔相等
space-around：item之間的間隔是item距離容器邊框（main-start、main-end）之間的兩倍。
space-evenly: items之間、item距離容器邊框之間間距都相等。

align-items

items在交叉軸上的對齊方式。取值：flex-start、flex-end、 center、baseline、stretch（默認）。
flex-start: cross-start方向對齊
flex-end: cross-end方向對齊
center: 交叉軸中點對齊
baseline: items中第一行文字的基線
stretch: 默認填充items的高度爲容器高度，與cross size一致。可是若是items有設置高度，則按照items的高度處理。

align-content

內容對齊方式,內容有多行（多條線）的狀況下，交叉軸上的對齊方式。對於內容只有一行的，該屬性不起做用,即flex-wrap的屬性不能是nowrap。取值爲：flex-start、flex-end、 center、space-between、space-around、stretch。
flex-start: 交叉軸start方向對齊。
flex-end: 交叉軸end方向對齊
center： 交叉軸中點對齊
space-between: 兩端對齊（start和end）。items之間間距相等
space-around: items之間的間距是到item到邊框（start或end）的兩倍。
stretch：items佔據全部空間

項目的屬性

order

定義item的排序，取值是interger類型的數據。取值越小，越靠前。默認值爲0.能夠取負值。

html

<div id="div1" class="container">
        <div class="item0">
            1
        </div>
        <div  class="item1">
            2
        </div>
        <div  class="item2">
            3
        </div>
        <div  class="item3">
            4
        </div>
        <div  class="item">
            5
        </div>
        <div  class="item">
            6
        </div>
        <div  class="item">
            7
        </div>
        <div  class="item">
            8
        </div>
    </div>

css

.item0
        order 0
    .item1
        order 1
    .item2
        order -1
    .item3
        order -2

flex-grow

放大屬性。item佔據container的比例。默認值爲0，不能夠取負值。
若是全部item的flex-grow都被設置爲1，那麼全部子項將平分container的空間。若是有一個item的flex-grow設置爲2，那麼它佔據的空間將是其他item的兩倍。這種劃分是基於主軸的。當主軸是橫向時，是將寬度按照比例劃分。當主軸是縱軸時，是將高度按照比例劃分。

flex-shrink

縮小屬性，默認值爲1，不能夠取負值。若是container下每一個item都是flex-shrink：1；則當空間不足時等比例縮小。若是有如下flex-shrink屬性取0；則其他item不縮小。

flex-basis

取值: <length> | auto（默認值）

這將在分配剩餘空間以前定義元素的默認大小。它能夠是一個長度（例如20％，5rem等）或關鍵字。 auto關鍵字的意思是「查看個人寬度或高度屬性」（暫時由main-size關鍵字完成，直到棄用）。內容關鍵字的意思是「根據項目的內容來肯定它的大小」 - 這個關鍵字尚未獲得很好的支持，因此很難去測試而且很難知道它的最大內容，最小內容和適合內容的含義。

flex

是flex-grow、 flex-shrink 和 flex-basis屬性的複合寫法。默認取值 0 1 auto。推薦使用這種寫法。

align-self

給某個子項（item）重寫對齊方式。取值auto（默認）、flex-start、 flex-end、center、baseline、stretch. 每一個取值含義align-item相似，只不過這個屬性是給特定的item的。align-items是給容器下全部item的。