Flex垂直布局詳解

一、什麼是Flex布局？

Flex布局（也稱為彈性布局）是一種CSS3的布局模式，用於描述如何在容器中分佈元素。Flex布局最主要的特點是能夠讓容器內的元素自適應容器的大小，並通過指定元素的對齊方式來控制元素在容器中的位置。

下面是一個簡單的Flex布局示例：

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

上面的代碼定義了一個具有Flex布局的容器，其中flex-direction屬性指定了主軸方向為垂直方向（即豎直），而align-items屬性指定了元素在容器內部的對齊方式為居中對齊。

二、Flex布局的基本概念

1. 容器和項目

在Flex布局中，容器指的是包含元素的父元素，也就是Flex容器，而項目指的則是容器內的子元素。

2. 主軸和交叉軸

在Flex布局中，主軸指的是Flex容器的方向，交叉軸則是與主軸垂直的方向。例如，如果Flex容器的主軸方向為垂直方向，則交叉軸就為水平方向。

3. 方向和方向屬性

在Flex布局中，方向指的是Flex容器的主軸方向或交叉軸方向。例如，flex-direction屬性用於指定Flex容器的主軸方向，而align-items屬性用於指定Flex容器內元素在交叉軸方向上的對齊方式。

三、Flex布局的屬性詳解

1. flex-direction屬性

flex-direction屬性用於設置Flex容器的主軸方向。它有以下4個可選值：

• row: 主軸方向為水平方向（默認值）
• row-reverse: 主軸方向與row相反
• column: 主軸方向為垂直方向
• column-reverse: 主軸方向與column相反

示例如下：

.container {
  display: flex;
  flex-direction: column;
}

2. justify-content屬性

justify-content屬性用於指定Flex容器內元素在主軸方向上的對齊方式。它有以下5個可選值：

• flex-start: 居左對齊（默認值）
• flex-end: 居右對齊
• center: 居中對齊
• space-between: 兩端對齊，項目之間的間隔相等
• space-around: 每個項目兩側的間隔相等。所以，項目之間的間隔比項目與邊框的間隔大一倍

示例如下：

.container {
  display: flex;
  justify-content: center;
}

3. align-items屬性

align-items屬性用於指定Flex容器內元素在交叉軸方向上的對齊方式。它有以下5個可選值：

• flex-start: 交叉軸的起點對齊
• flex-end: 交叉軸的終點對齊
• center: 交叉軸的中點對齊
• baseline: 項目的第一行文字的基線對齊
• stretch: 如果項目未設置高度或設為auto，將佔滿整個容器的高度（默認值）

示例如下：

.container {
  display: flex;
  align-items: center;
}

4. align-self屬性

align-self屬性用於指定Flex容器內某個項目在交叉軸方向上的對齊方式。它有以下5個可選值，與align-items屬性類似：

• auto: 沒有特定的行為。即使用父元素的align-items值
• flex-start: 交叉軸的起點對齊
• flex-end: 交叉軸的終點對齊
• center: 交叉軸的中點對齊
• baseline: 項目的第一行文字的基線對齊
• stretch: 如果項目未設置高度或設為auto，將佔滿整個容器的高度（默認值）

示例如下：

.item {
  align-self: flex-end;
}

5. flex-wrap屬性

flex-wrap屬性用於指定Flex容器內元素是否可以換行。它有以下3個可選值：

• nowrap: 不換行（默認值）
• wrap: 換行，第一行在上方
• wrap-reverse: 換行，第一行在下方

示例如下：

.container {
  display: flex;
  flex-wrap: wrap;
}

6. align-content屬性

align-content屬性用於指定Flex容器內元素在交叉軸上的對齊方式。它有以下5個可選值：

• flex-start: 與交叉軸的起點對齊
• flex-end: 與交叉軸的終點對齊
• center: 與交叉軸的中點對齊
• space-between: 與交叉軸兩端對齊，項目之間的間隔相等
• space-around: 每個項目兩側的間隔相等。所以，項目之間的間隔比項目與邊框的間隔大一倍
• stretch: 默認值。如果項目未設置高度或設為auto，將佔滿整個容器的高度

示例如下：

.container {
  display: flex;
  flex-wrap: wrap;
  align-content: space-around;
}

四、實際應用

1. Flex布局實現垂直居中

在Flex布局中，實現元素的垂直居中非常簡單，只需要將align-items屬性設置為center即可：

.container {
  display: flex;
  align-items: center;
  justify-content: center;
}

2. Flex布局實現等高布局

在傳統布局方法中，實現等高布局通常並不容易。而在Flex布局中，只需要將容器的align-items屬性設置為stretch即可實現等高：

.container {
  display: flex;
  align-items: stretch;
}

3. Flex布局實現底部固定內容的布局

這種布局方法非常實用，尤其是對於底部固定但高度不確定的元素，如版權信息等。示例代碼如下：

.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.content {
  flex: 1;
}

.footer {
  flex-shrink: 0;
}

五、總結

以上就是Flex垂直布局的詳細闡述。Flex布局是一種非常實用的布局方法，尤其是在響應式設計中，它的優勢更加明顯。如果您還沒有嘗試過Flex布局，那麼現在就是一個開始學習的好時機了。