背景

在Flexbox Layout（柔性盒）模組（目前是W3C最後呼叫工作草案）旨在提供一個更有效的方式來佈置，調整和專案之間在一個容器中分配空間，即使它們的大小是未知的和/或動態的（因而詞“柔性”）。 flex佈局背後的主要思想是賦予容器更改其專案的寬度/高度（和順序）以最好地填充可用空間（主要適應各種顯示裝置和螢幕大小）的能力。柔性容器可擴充套件專案以填充可用空間，或縮小它們以防止溢位 最重要的是，flexbox佈局與方向無關，而不是常規佈局（基於垂直方向的塊和基於水平方向的內聯塊）。雖然這些工作對於頁面很有效，但它們缺乏靈活性（無雙關語）來支援大型或複雜應用程式（尤其是在改變方向，調整大小，拉伸，縮小等方面）。 注意： Flexbox佈局最適合應用程式的元件和小型佈局，而網格佈局適用於大型佈局。

基礎知識和術語

• 由於flexbox是一個完整的模組，而不是一個單獨的屬性，因此它涉及很多事情，包括整套屬性。其中一些是為了在容器上設定（父元素，稱為“彈性容器”），而其他則是為了在子項上設定（稱為“彈性專案”）。

• 如果常規佈局基於塊流向和內聯流向，則柔性佈局基於“柔性流動方向”。請從規範中檢視這個數字，解釋flex佈局背後的主要思想。
  

  基本上，專案將被佈置以下任一main axis（從main-start至main-end）或十字軸（從cross-start至cross-end）。

• 主軸 - 柔性容器的主軸是柔性專案佈局的主要軸。當心，它不一定是水平的; 這取決於flex-direction財產（見下文）。

• main-start | main-end - 彈性專案放置在容器中，從主啟動開始到主要結束。 主尺寸 -
  柔性物品的寬度或高度，以主尺寸為準，是物品的主尺寸。Flex專案的主尺寸屬性是“寬度”或“高度”屬性，以主維度中的哪一個為準。

• 橫軸 - 垂直於主軸的軸稱為橫軸。它的方向取決於主軸的方向。

• 跨開始| 交叉 - 彎曲線充滿物品並從彎曲容器的交叉起始側開始放置到容器中並朝向交叉端側。

• 十字尺寸 - 彈性物品的寬度或高度，以交叉尺寸為準，是物品的交叉尺寸。交叉大小屬性是交叉維度中的“寬度”或“高度”中的任何一個。

第一大類：父級屬性

父級（flex容器）的屬性

• 顯示

這定義了一個flex容器; 內聯或塊取決於給定的值。它為所有直接的孩子提供了一個彈性環境。

.container {
  display: flex; /* or inline-flex */
}

• flex-direction
  

這建立了主軸，從而定義了柔性物品放置在柔性容器中的方向。Flexbox是（除了可選包裝）單向佈局概念。將flex專案視為主要佈置在水平行或垂直列中。

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

• row（預設）：從左到右在ltr; 從右到左rtl
• row-reverse：從右到左ltr; 從左到右在rtl
• column：相同row但從上到下

• column-reverse：相同row-reverse但從下到上

• flex-wrap
  

預設情況下，flex專案都將嘗試適合一行。你可以改變它，並允許專案根據需要用這個屬性進行包裝。

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

• nowrap （預設）：所有彈性專案將在一行上
• wrap：flex專案將從上到下包裝成多行。

• wrap-reverse：flex專案將從下到上包裝成多行。

• flex-flow（適用於：父Flex容器元素）

這是一個簡寫flex-direction和flex-wrap屬性，它們一起定義了柔性容器的主軸和交叉軸。預設是row nowrap。

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

• justify-content
  

這定義了沿主軸的對齊。當一條線上的所有彈性物品都不靈活或靈活但達到其最大尺寸時，它有助於分配剩餘空間。當物品溢位時，它也對物品的對齊進行控制。

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

• flex-start （預設）：專案打包到起始行
• flex-end：專案被打包到結束行
• center：物品沿著這條線居中
• space-between：專案均勻分佈在行中; 第一項是在起始行，最後一項是最後一行
• space-around：物品均勻分佈在線上，周圍有相同的空間。請注意，視覺上空間不相等，因為所有物品在兩側都有相同的空間。第一個專案將在容器邊緣有一個空間單位，但下一個專案之間有兩個空間單元，因為下一個專案有其自己的間距。
• space-evenly：專案是分散式的，以便任何兩個專案之間的間距（以及到邊緣的空間）是相等的。
• align-items
  

這定義了flex專案沿當前行的橫軸放置的預設行為。把它看作是justify-content橫軸（垂直於主軸）的版本。

.container {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

• flex-start：專案的跨起始邊緣邊緣放置在交叉起始線上
• flex-end：物品的交叉邊緣邊緣放置在交叉線上
• center：專案以交叉軸為中心
• baseline：專案對齊，比如他們的基線對齊

• stretch （預設）：拉伸填充容器（仍然尊重最小寬度/最大寬度）

• align-content
  

當橫軸上有額外的空間時，這會將柔性容器的線justify-content對齊，類似於如何在主軸內對齊單個專案。

注意：只有一行柔性專案時，此屬性不起作用。

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

• flex-start：將行打包到容器的起始處
• flex-end：將行打包到容器的末端 center：包裝在容器中心的線條
• space-between：線條均勻分佈; 第一行是容器的開始，而最後一行是末尾
• space-around：在每條線周圍均勻分佈均勻空間的線
• stretch （預設）：線拉伸佔據剩餘空間

第二大類：彈性專案（子類屬性）

預設情況下，Flex專案按原始碼順序排列。但是，該order屬性控制它們出現在柔性容器中的順序。

.item {
  order: <integer>; /* default is 0 */
}

• flex-grow
  

這定義了Flex專案在必要時增長的能力。它接受作為比例的無單位價值。它規定了該專案應該佔用的柔性容器內的可用空間量。

如果所有專案都flex-grow設定為1，則容器中剩餘的空間將平均分配給所有孩子。如果其中一個孩子的值為2，剩餘空間將佔用其他空間的兩倍（或至少會嘗試）。

.item {
  flex-grow: <number>; /* default 0 */
}

• flex-basis

這將在分配剩餘空間之前定義元素的預設大小。它可以是一個長度（例如20％，5rem等）或關鍵字。該auto關鍵字的意思是“看看我的寬度或高度屬性”（暫時由main-size關鍵字完成，直到棄用）。該content關鍵字的意思是“它根據專案的內容大小”
-此關鍵字不能很好地支援呢，所以很難進行測試，並更難知道它的兄弟max-content，min-content和fit-content做。

.item {
  flex-basis: <length> | auto; /* default auto */
}

如果設定為0，則不會考慮內容的額外空間。如果設定為auto，多餘空間將根據其flex-grow值分配。

• align-self
  

這允許align-items為各個彈性專案覆蓋預設對齊方式（或由其指定的對齊方式）。

請參閱align-items說明以瞭解可用值。

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

請注意float，clear並且vertical-align對Flex專案沒有影響。

簡單的例子

完美集中問題。如果您使用flexbox，它不會更簡單。

.parent {
  display: flex;
  height: 300px; /* Or whatever */
}

.child {
  width: 100px;  /* Or whatever */
  height: 100px; /* Or whatever */
  margin: auto;  /* Magic! */
}

這依賴於在柔性容器中設定為“auto”的邊距吸收額外空間的事實。所以設定一個垂直邊距auto將會使物品在兩個軸上都完美居中。

想象一下，我們在我們網站的最頂端有一個右對齊的導航，但我們希望它以中型螢幕為中心，並在小型裝置上單列。很簡單。

/* Large */
.navigation {
  display: flex;
  flex-flow: row wrap;
  /* This aligns items to the end line on main-axis */
  justify-content: flex-end;
}

/* Medium screens */
@media all and (max-width: 800px) {
  .navigation {
    /* When on medium sized screens, we center it by evenly distributing empty space around items */
    justify-content: space-around;
  }
}

/* Small screens */
@media all and (max-width: 500px) {
  .navigation {
    /* On small screens, we are no longer using row direction but column */
    flex-direction: column;
  }
}