摘要：彈性布局背景模塊目前為旨在提供一種更有效的方式來(lái)布置，對(duì)齊和分配容器中的項(xiàng)目之間的空間，即使其尺寸未知和或動(dòng)態(tài)因此單詞。主軸彈性容器的主軸是彈性項(xiàng)目布局的主要軸子項(xiàng)目默認(rèn)按照主軸排列。判斷哪個(gè)是起始點(diǎn)，主要看彈性布局的流動(dòng)方向。

原文章地址
https://css-tricks.com/snippe...
根據(jù)原文章翻譯并添加自己的理解，有不對(duì)的歡迎指正。

Flexbox Layout（Flexible Box）模塊（目前為W3C Last Call Working Draft）旨在提供一種更有效的方式來(lái)布置，對(duì)齊和分配容器中的項(xiàng)目之間的空間，即使其尺寸未知和/或動(dòng)態(tài)（因此單詞“flex”）。

Flex布局背后的主要思想是賦予容器更改其項(xiàng)目的寬度/高度（和順序）以最好地填充可用空間（主要適應(yīng)各種顯示設(shè)備和屏幕大?。┑哪芰?。彈性容器可擴(kuò)展項(xiàng)目以填充可用空間，或縮小它們以防止溢出。

最重要的是，flexbox布局與方向無(wú)關(guān)，而不是常規(guī)布局（基于垂直方向的塊和基于水平方向的內(nèi)聯(lián)塊）。雖然這些工作對(duì)于頁(yè)面很有效，但它們?nèi)狈`活性（無(wú)雙關(guān)語(yǔ)）來(lái)支持大型或復(fù)雜應(yīng)用程序（尤其是在改變方向，調(diào)整大小，拉伸，縮小等方面）。
注意：Flexbox布局最適合應(yīng)用程序的組件和小型布局，而網(wǎng)格布局適用于大型布局。

由于flexbox是一個(gè)完整的模塊，而不是一個(gè)多帶帶的屬性。是一個(gè)屬性集合，是用于設(shè)置容器和容器內(nèi)各個(gè)子項(xiàng)目的屬性集合。其中一些是為了在容器上設(shè)置（父元素，稱為“flex容器”），而其他的則是為了在子item上設(shè)置（稱為“flex items”）。

如果常規(guī)布局基于塊流向和內(nèi)聯(lián)流向，則布局基于“彈性流動(dòng)方向”。請(qǐng)從規(guī)范中查看這個(gè)數(shù)字，解釋flex布局背后的主要思想。

基本上，項(xiàng)目將按照main axis（從main start 到 main end）或cross axis（從cross start 到 cross end）布置。

交叉軸是與主軸垂直的那條軸線，之所以不稱之為橫軸|縱軸，是因?yàn)橹鬏S不一定是水平的，有水平和垂直兩種，而交叉軸則是與主軸總是垂直的關(guān)系。

main axis（主軸）:

彈性容器的主軸是彈性項(xiàng)目布局的主要軸,子項(xiàng)目默認(rèn)按照主軸排列。當(dāng)心，它不一定是水平的;它取決于彈性方向?qū)傩詅lex-direction（見(jiàn)下文）。

main-start | main-end:

主軸與容器的有兩個(gè)交叉點(diǎn)，一個(gè)是起始點(diǎn)一個(gè)是結(jié)束點(diǎn)。判斷哪個(gè)是起始點(diǎn)，主要看彈性布局的流動(dòng)方向。e.g. 如果flex-direction: row; 那么main start就是主軸與容器交叉的左側(cè)的點(diǎn)， 那么main end就是主軸與容器交叉的右側(cè)的點(diǎn)，彈性布局中共子項(xiàng)是按照從起始點(diǎn)到結(jié)束點(diǎn)的方向排列的。

main size:

彈性容器的寬度或高度，以main size為準(zhǔn)，是container的主尺寸。 Flex項(xiàng)目的main size 屬性是“寬度”或“高度”屬性，以主維度中的哪一個(gè)為準(zhǔn)。

cross axis:

垂直于main axis的軸稱為交叉軸。它的方向取決于main axis的方向。

cross-start | cross-end:

交叉軸與容器有也有兩個(gè)交點(diǎn)，如果flex-direction：row; 那么頂部的點(diǎn)就是cross-start,底部的點(diǎn)就是cross-end

cross size:

彈性容器的寬度或高度，以為cross size為準(zhǔn)，是item的交叉尺寸。cross size屬性是交叉維度中的“寬度”或“高度”中的任何一個(gè)。

diplay定義了一個(gè)flex容器;內(nèi)聯(lián)或塊取決于給定的值。它為所有直接的子項(xiàng)目提供了一個(gè)彈性環(huán)境。

display: flex; /* inline-flex */

請(qǐng)注意，CSS列對(duì)flex容器沒(méi)有影響。

容器內(nèi)子項(xiàng)目的排列方式。四個(gè)取值 row（默認(rèn)）、column、row-reverse、column-reverse
row：橫向
column： 縱向
row-reverse： 橫向倒序
column-reverse： 縱向倒序

默認(rèn)子項(xiàng)目排列為一行，此屬性規(guī)定是否要換行，如何換行。三個(gè)取值 nowrap（默認(rèn)）、wrap、wrap-reverse
nowrap： 不換行 從 main-start 排到 main-end 不換行，并且容器可能溢出
wrap：換行 項(xiàng)目排序 從 main-start 排到 main-end
wrap-reverse：換行、從 main-end 排到 main-start

該屬性是一個(gè)復(fù)合屬性，取值為兩個(gè)值，第一個(gè)值是flex-direction, 第二個(gè)值是flex-wrap。
默認(rèn)是flex-flow：row nowrap；

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

items在交叉軸上的對(duì)齊方式。取值：flex-start、flex-end、 center、baseline、stretch（默認(rèn)）。
flex-start: cross-start方向?qū)R
flex-end: cross-end方向?qū)R
center: 交叉軸中點(diǎn)對(duì)齊
baseline: items中第一行文字的基線
stretch: 默認(rèn)填充items的高度為容器高度，與cross size一致。但是如果items有設(shè)置高度，則按照items的高度處理。

內(nèi)容對(duì)齊方式,內(nèi)容有多行（多條線）的情況下，交叉軸上的對(duì)齊方式。對(duì)于內(nèi)容只有一行的，該屬性不起作用,即flex-wrap的屬性不能是nowrap。取值為：flex-start、flex-end、 center、space-between、space-around、stretch。
flex-start: 交叉軸start方向?qū)R。
flex-end: 交叉軸end方向?qū)R
center： 交叉軸中點(diǎn)對(duì)齊
space-between: 兩端對(duì)齊（start和end）。items之間間距相等
space-around: items之間的間距是到item到邊框（start或end）的兩倍。
stretch：items占據(jù)所有空間

定義item的排序，取值是interger類型的數(shù)據(jù)。取值越小，越靠前。默認(rèn)值為0.可以取負(fù)值。

html

        

            1
        
        

            2
        
        

            3
        
        

            4
        
        

            5
        
        

            6
        
        

            7
        
        

            8
        
    

css

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

放大屬性。item占據(jù)container的比例。默認(rèn)值為0，不可以取負(fù)值。
如果所有item的flex-grow都被設(shè)置為1，那么所有子項(xiàng)將平分container的空間。如果有一個(gè)item的flex-grow設(shè)置為2，那么它占據(jù)的空間將是其余item的兩倍。這種劃分是基于主軸的。當(dāng)主軸是橫向時(shí)，是將寬度按照比例劃分。當(dāng)主軸是縱軸時(shí)，是將高度按照比例劃分。

縮小屬性，默認(rèn)值為1，不可以取負(fù)值。如果container下每個(gè)item都是flex-shrink：1；則當(dāng)空間不足時(shí)等比例縮小。如果有以下flex-shrink屬性取0；則其余item不縮小。

取值: | auto（默認(rèn)值）

這將在分配剩余空間之前定義元素的默認(rèn)大小。它可以是一個(gè)長(zhǎng)度（例如20％，5rem等）或關(guān)鍵字。 auto關(guān)鍵字的意思是“查看我的寬度或高度屬性”（暫時(shí)由main-size關(guān)鍵字完成，直到棄用）。內(nèi)容關(guān)鍵字的意思是“根據(jù)項(xiàng)目的內(nèi)容來(lái)確定它的大小” - 這個(gè)關(guān)鍵字還沒(méi)有得到很好的支持，所以很難去測(cè)試并且很難知道它的最大內(nèi)容，最小內(nèi)容和適合內(nèi)容的含義。

是flex-grow、 flex-shrink 和 flex-basis屬性的復(fù)合寫(xiě)法。默認(rèn)取值 0 1 auto。推薦使用這種寫(xiě)法。

給某個(gè)子項(xiàng)（item）重寫(xiě)對(duì)齊方式。取值auto（默認(rèn)）、flex-start、 flex-end、center、baseline、stretch. 每個(gè)取值含義align-item類似，只不過(guò)這個(gè)屬性是給特定的item的。align-items是給容器下所有item的。