彈性布局示例

piglei 發(fā)布于2019-08-02 10:15 / 576人閱讀

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

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

彈性布局-背景

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

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

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

基礎(chǔ)知識和術(shù)語

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

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

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

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

main axis（主軸）:

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

main-start | main-end:

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

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容器;內(nèi)聯(lián)或塊取決于給定的值。它為所有直接的子項目提供了一個彈性環(huán)境。

display: flex; /* inline-flex */

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

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

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

flex-wrap 是否換行

默認子項目排列為一行，此屬性規(guī)定是否要換行，如何換行。三個取值 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方向?qū)R，即 main-start方向?qū)R
flex-end：主軸的end方向?qū)R，即 main-end 方向?qū)R
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方向?qū)R
flex-end: cross-end方向?qū)R
center: 交叉軸中點對齊
baseline: items中第一行文字的基線
stretch: 默認填充items的高度為容器高度，與cross size一致。但是如果items有設置高度，則按照items的高度處理。

align-content

內(nèi)容對齊方式,內(nèi)容有多行（多條線）的情況下，交叉軸上的對齊方式。對于內(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：交叉軸中點對齊
space-between: 兩端對齊（start和end）。items之間間距相等
space-around: items之間的間距是到item到邊框（start或end）的兩倍。
stretch：items占據(jù)所有空間

項目的屬性 order

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

html

css

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

flex-grow

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

flex-shrink

縮小屬性，默認值為1，不可以取負值。如果container下每個item都是flex-shrink：1；則當空間不足時等比例縮小。如果有以下flex-shrink屬性取0；則其余item不縮小。

flex-basis

取值: | auto（默認值）

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

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的。