Flex是一種用於網頁佈局的強大CSS技術。透過Flex佈局，您可以更靈活、簡單地控制和設計網頁元素的排列方式，以達到不同螢幕大小或裝置上的響應性設計需求。以下是Flex佈局的基本樣式介紹：

建立Flex容器

首先，需要將一個容器設置為Flex容器，以便其中的元素可以使用Flex佈局。使用下面的CSS樣式來創建一個Flex容器：

.flex-container {
    display: flex;
}

這將使.flex-container內的子元素可以使用Flex佈局。

Flex方向

Flex容器具有主軸和交叉軸，可以通過flex-direction 屬性來設定主軸的方向。

1.主軸：這是Flex容器的主要方向，Flex項目沿著主軸排列。主軸的方向可以是水平方向（row或row-reverse）或垂直方向（column或column-reverse）。

2.交叉軸：這是與主軸垂直的軸。交叉軸的方向取決於主軸的方向。如果主軸是水平的，則交叉軸是垂直的，反之亦然。

以下是一些主要的 flex-direction 屬性值:

• row:水平主軸，從左到右排列。
• row-reverse:水平主軸，從右到左排列。
• column:垂直主軸，從上到下排列。
• column-reverse：垂直主軸，從下到上排列。

.flex-container {
    display: flex;
    flex-direction: row; /* 或者其他方向值 */
}

Flex對齊

可以使用 justify-content 和 align-items 屬性來控制Flex容器內元素的對齊方式：

• justify-content:控制主軸上元素的對齊方式，例如水平對齊。
• align-items:控制交叉軸上元素的對齊方式，例如垂直對齊。

.flex-container {
    display: flex;
    justify-content: center; /* 主軸居中對齊 */
    align-items: center; /* 交叉軸居中對齊 */
}

Flex元素

在Flex容器中的子元素稱為Flex元素，它們可以使用以下屬性進行配置：

• flex-grow:指定元素在主軸上的放大比例。
• flex-shrink:指定元素在主軸上的縮小比例。
• flex-basis:指定元素在主軸上的初始大小。

.flex-item {
    flex-grow: 1; /* 放大比例 */
    flex-shrink: 1; /* 收縮比例 */
    flex-basis: auto; /* 初始大小 */
}

總結

Flex佈局是一種靈活且強大的CSS技術，可以簡化網頁佈局設計，並使其更具響應性。通過建立Flex容器，設定主軸方向，以及使用Flex元素的屬性，可以輕鬆控制網頁元素的排列方式，以適應不同的設備和瀏覽器尺寸。