`flex-direction` 設定了主軸，從而定義了彈性專案放置在彈性容器中的方向。
 Flexbox 是一種單向佈局概念，可將彈性專案視為主要以水平行或垂直列布局。

![](https://img-blog.csdnimg.cn/img_convert/253fe58933ad2a74a244c615619f01a0.png)

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

幾種支援的屬性：
- row (default): left to right in ltr; right to left in rtl
- row-reverse: right to left in ltr; left to right in rtl
- column: 和 row 屬性工作原理相同，只不過是從 top 到 bottom 佈局
- column-reverse: 同 row-reverse，只不過是從 bottom 到 top

# flex-grow 屬性

該屬性定義了 flex item 在必要時增長寬度的能力。它接受一個作為比例的無單位值。 它規定了專案應該佔用彈性容器內的可用空間量。

下圖第一行，三個元素的 flex item 的 flex-grow 都為 1，因此共同平分 flex 容器剩餘的寬度。

![](https://img-blog.csdnimg.cn/img_convert/99d0e01a3ea456755996a7c19456e9a3.png)

下圖第二行中間的 flex item 的 flex-grow 屬性為 2，其他兩個元素為 1，因此寬度比例為1：2：1.

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

# justify-content

![](https://img-blog.csdnimg.cn/img_convert/6368bc8ee5e457f546d83f577c1a61e7.png)

該屬性定義了沿主軸的對齊方式。 當一行中的所有 flex 專案已達到其最大大小時，它有助於分配剩餘的額外可用空間。 當專案溢位線時，它還對專案的對齊施加一些控制。

- flex-start（預設）：專案被打包到 flex-direction 的開始。
- flex-end：專案被打包到 flex-direction 的末端。
- start: items 被打包到 writing-mode 方向的開始。
- end：專案被打包到書寫模式方向的末尾。
- left：專案被打包到容器的左邊緣，除非這對 flex-direction 沒有意義，否則它的行為就像開始。
- right：專案被打包到容器的右邊緣，除非這對 flex-direction 沒有意義，否則它的行為就像 end。
- 中心：專案沿線居中
- space-between：專案在行中均勻分佈； 第一項在開始行，最後一項在結束行
- space-around：專案均勻分佈在一行中，周圍的空間相等。 請注意，從視覺上看，空間並不相等，因為所有專案的兩側都有相等的空間。 第一個專案將在容器邊緣有一個空間單位，但下一個專案之間有兩個單位的空間，因為下一個專案有自己適用的間距。
- space-evenly：專案分佈使得任意兩個專案之間的間距（以及到邊緣的空間）相等。

CSS Flex 佈局的 flex-direction 屬性講解

相關文章

最新文章