CSS佈局 | Flexbox的理解與使用

導讀：容器屬性有：display,flex-direcction,flex-wrap,flex-flow(flex-direction和flex-wrap屬性的簡寫),justify-content,align-items,align-content;子項屬性：order,flex-grow,flex-shrink,flex-basis,flex(flex-grow,flex-shrink,flex-basis的簡寫),align-self

原文鏈接：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

---

背景

彈性盒模型意在提供一種更有效的方式來佈局、排列和分配容器中的子項，即使這些子項是動態的且大小是未知的。
flex佈局的核心思想是讓容器可以改變其子項的寬度、高度和順序以便更好地填充可用空間（主要是爲了更好地適應各種顯示設備和屏幕大小）。一個flex容器擴展其子項來填充可用的空閒空間，或者防止溢出而縮小它們。
更重要的是，flexbox佈局與常規佈局不同，它是與方向無關的。雖然這些都適用於頁面，但是它們缺乏靈活性支持大型或者更復雜的應用程序，特別是涉及到改變方向，改變大小、拉伸和收縮等。
注：flexbox佈局最適合用在APP的組件和小規模佈局，而grid佈局適合大規模佈局。

---

基礎術語

flexbox是一個完整的模型，不是一個單獨的屬性，它包含了很多東西包括其全部屬性。這些屬性其中一部分是要在容器上設置的（父元素，叫”flex 容器”），其他的則在子項上設置（叫”flex 子項”）。
如果說常規佈局是基於塊和內聯流方向，那麼flex佈局就是基於彈性流方向。請看下面這個解釋flex佈局主要思想的圖

這些子項會沿着主軸或者橫軸的方向佈局。

• main axis 主軸-主軸是flex容器主要的軸，flex的項目沿着主軸佈局。要注意的是，主軸並非一定是水平方向的，主軸的方向取決於flex-direction屬性（見下文）。
• main-start | main-end -在容器中的flex項目，沿着主軸開始的位置到結束位置放置。
• main size -一個flex項目的寬度和高度，無論這個項目是否在主維度上，都是這個項目的主要尺寸。flex項目的主尺寸屬性是“寬度”還是“高度”，兩者都是主要尺寸。
• cross axis 橫軸-垂直於主軸的軸叫橫軸，橫軸的方向取決於主軸的方向
• cross-start | cross-end -flex行被項目填充着，這些放置在容器中的項目從交叉軸的開始位置沿着交叉軸終點放置

• cross size -無論是都在交叉軸維度，flex項目的寬度和高度，都是這個項目的橫向尺寸。這個橫向尺寸屬性是交叉維度中的寬度或高度。

  ---

  屬性

  flex container:容器屬性

display -這定義了一個flex容器，內斂還是塊取決於給定的值。它爲所有直接孩子元素提供了一個flex上下文。

display:flex;/* or inline-flex */

需要注意的是，CSS的列對於flex容器無效。

flex-direction -設立主軸，因此定義flex項目放置在flex容器裏的方向。
flexbox是一個單向佈局概念。可以把flex項目看做放置在水平行或垂直列。

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

• row (default):在ltr（ 代表左到右的排列方式 ）方式下從左到右；在rtl方式下從右到左
• row-reverse:在ltr（ 代表左到右的排列方式 ）方式從右到左；在rtl方式 從左到右
• column: 跟行類似，但從上到下
• column-reverse:跟 row-reverse類似，但從下到上

flex-wrap -默認情況下，flex項目都會擠在同一行上。你可以通過這個屬性改變它，允許項目多行排列

.container{
  flex-wrap: nowrap | wrap | wrap-reverse;
}

• nowrap (default):所有的flex項目都會在同一行
• wrap:從上到下，多行排列
• wrap-reverse:從下到上，多行排列
  這裏有些 flex-wrap的demo

flex-flow -這是flex-direction和flex-wrap屬性的簡寫，可以定義flex容器的主軸和交叉軸。默認屬性值是row nowrap

flex-flow: <‘flex-direction’> || <‘flex-wrap’>

justify-content - 這定義了主軸的對齊方式。這有助於分配額外剩餘的空閒空間，一行上flex項目是非彈性或者是彈性但達到他們最大尺寸時。當它們溢出線時，它還是可以控制項目的對齊方式。

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}

• flex-start (default):項目從（父容器）始端開始排列
• flex-end:項目從（父容器）始端開始排列
• center:項目放置在中間
• space-between:項目均勻地分佈在行上，第一個項目在起點線，最後一個項目在終點線。
• space-around:項目均勻地分佈在行上，且項目兩側有相等的空想。需要注意的是，視圖上看起來不是均等，所有的項目都有一個一樣的空間在兩側。第一個項目和容器邊緣間有一個單位的間距，但是項目與項目之間有兩個單位的間距。
• space-evenly:邊緣與項目、項目與項目之間的間距都相等。

align-items -這定義了flex項目在當前行的交叉軸中如何佈局的默認行爲。可以把這看做是對於交叉軸對齊的justify-content屬性

• flex-start:在交叉軸的起點線外邊緣的項目開始於交叉軸的起點線
• flex-end:在交叉軸的終點線外邊緣的項目開始於交叉軸的終點線
• center:項目在交叉軸的中心線行
• baseline:項目以基線對齊
• stretch:拉伸至填滿整個容器

align-content -當過交叉軸有額外的空間，對齊flex容器行，就像justify-content在主軸上對齊每個項目。
需要注意的是當flex項目只有一行時，這個屬性無效

• flex-start:行在容器的始端開始排列
• flex-end:行在容器的末端開始排列
• center:行排列在容器的中部
• space-between:每一行都均勻分配，第一行在容器的始端和最後一行在容器的末端
• space-around:每一行都均勻分配

• stretch (default):行拉伸至佔滿容器剩餘的空間。

  flex items:子項屬性

  order-默認的，flex的項目都會按順序排列。但是，order這個屬性可以定義它們在容器中出現的順序。數值越小，排得越前，默認爲0.
  
  flex-grow-這定義了flex項目的放大比例，參數爲一個無單位數值。如果所有項目的flex-grow都設爲1，容器的剩餘空間將平均分配給每個flex項目。如果其中一個項目設爲2，那麼該項目所佔空間比例就是其他項目的2倍。負數無效。
  
  flex-shrink-這定義了flex項目的縮小比例。負數無效。
  flex-basis-這定義了在分配剩餘空間之前的默認大小。它可以是一個長度或一個關鍵字。
  auto：佔據的主軸空間
  content：依照項目內容分配大小，這個關鍵字沒有得到很好的支持，所以很難測試和很難了解max-content,min-content和fit-content這些屬性。
  如果設爲0，則不考慮內容周圍的額外空間；如果設爲auto，剩餘的空間則基於flex-grow的值分配。
  
  flex-flex是flex-grow,flex-shrink和flex-basis的簡寫，第二個和第三個屬性是可選的，默認值爲 0 1 auto 。
  推薦用簡寫的屬性，瀏覽器會推算相關值。
  align-self-允許對單個flex項目覆蓋，可以參照 align-items 的參數。
  需要注意的是，float,clear和vertical-align對flex項目無效。
  

---

栗子

<!- -html -->
<ul class="flex-container">
    <li class="flex-item">1</li>
    <li class="flex-item">2</li>
    <li class="flex-item">3</li>
    <li class="flex-item">4</li>
    <li class="flex-item">5</li>
    <li class="flex-item">6</li>
</ul>
<!-- CSS -->
    .flex-container {
        padding: 0;
        margin: 0;
        list-style: none;
        display: flex;
        -webkit-flex-flow: row wrap;
        justify-content: space-around;
    }

    .flex-item {
        background: tomato;
        padding: 5px;
        width: 200px;
        height: 150px;
        margin-top: 10px;

        line-height: 150px;
        color: white;
        font-weight: bold;
        font-size: 3em;
        text-align: center;
    }

效果圖：

效果圖flex項目的排列會隨屏幕的寬度變化而變化。

第一次翻譯文章，如果有誤，歡迎指出，謝謝支持~