IT課程 CSS基礎 032_彈性佈局 Flex

彈性佈局 Flex

長久以來，CSS 佈局中唯一可靠且跨瀏覽器兼容的創建工具只有 float 和 position。這兩個工具大部分情況下都很好使，但是在某些方面它們具有一定的局限性，讓人難以完成任務。

以下簡單的佈局需求是難以或不可能用這樣的工具（float 和 position）方便且靈活的實現的：

在父內容裡面垂直居中一個塊內容。
使容器的所有子項占用等量的可用寬度/高度，而不管有多少寬度/高度可用。
使多列佈局中的所有列採用相同的高度，即使它們包含的內容量不同。

示例效果

CSS 的 Flex 佈局是 CSS 中的一個強大的佈局工具，可以用來創建各種靈活的佈局。要掌握 CSS 的 Flex 佈局，需要掌握以下幾個知識點：

Flex 容器 (flex container)：Flex 佈局由 Flex 容器和 Flex 項組成。Flex 容器是將 Flex 項放置到 Flex 佈局中的容器。Flex 容器可以是任何元素，但通常使用 div 元素。
Flex 項 (flex item)：Flex 項是放置在 Flex 容器中的元素。Flex 項可以是任何元素，但通常使用 div 元素。
主軸 (main axis)：主軸是 Flex 佈局中元素的水平或垂直方向。
交叉軸 (cross axis)：交叉軸是 Flex 佈局中元素的垂直或水平方向。

Flex 容器屬性

Flex 容器具有以下屬性用於控制 Flex 佈局：

display: 設置 Flex 容器的顯示模式。Flex 容器必須設置為 display: flex 或 display: inline-flex 才能使用 Flex 佈局。
flex-direction: 設置 Flex 佈局的主軸方向。值可以是 flex-start 主軸起始對齊、flex-end 主軸末尾對齊、row 主軸水平排列、row-reverse 主軸反向水平排列、column 主軸垂直排列 column-reverse 主軸反向垂直排列。
flex-wrap： 控制 Flex 容器內的項目是否換行。nowrap 默認值，不換行、wrap 換行、wrap-reverse反向換行。
flex-flow：flex-direction 和 flex-wrap 的簡寫，兩個值，分別對應 flex-direction 和 flex-wrap。
justify-content: 設置 Flex 容器中 Flex 項在主軸上的對齊方式。值可以是 flex-start 主軸起始對齊、flex-end 主軸末尾對齊、center 主軸中間對齊、space-between 主軸平均對齊（容器首尾對齊）、space-around 主軸平均對齊（項目間隔相等）或 space-evenly 主軸平均對齊（包括首尾兩側的間隔相等）。
align-items: 設置 Flex 容器中 Flex 項在交叉軸上的對齊方式。值可以是 flex-start 交叉軸起始對齊、flex-end 交叉軸末尾對齊、center 交叉軸中間對齊、stretch 默認值或 baseline 交叉軸第一行文字基線對齊。只作用於 Flex 容器的子項目。
align-content：與align-items一樣都是用於控制子項目在交叉軸上對齊方式的屬性，只在 Flex 容器具有多根軸線（多行或多列情況下）時生效。

Flex 項屬性

Flex 項具有以下屬性用於控制 Flex 項在 Flex 佈局中的佈局：

flex-grow: 設置 Flex 項在主軸上的伸縮比例。值可以是 0 到 1 之間的浮點數。
flex-shrink: 設置 Flex 項在主軸上的收縮比例。值可以是 0 到 1 之間的浮點數。
flex-basis: 設置 Flex 項在主軸上的默認寬度或高度。值可以是長度值、百分比值或 auto。
order: 設置 Flex 項在主軸上的順序。值可以是 1 到 65535 之間的整數。

示例：

1
/* Flex容器樣式 */
2
.flex-container {
3
    display: flex;
4
    flex-direction: row; /* 主軸方向為水平 */
5
    justify-content: space-around; /* 主軸上的對齊方式 */
6
    align-items: center; /* 交叉軸上的對齊方式 */
7
    height: 200px; /* 設置容器高度 */
8
    border: 2px solid #333; /* 為了更好的可視化效果，添加邊框 */
9
}
10
/* Flex項目樣式 */
11
.flex-item {
12
    flex: 1; /* 等分主軸空間 */
13
    text-align: center;
14
    padding: 20px;
15
    background-color: #f2f2f2;
16
}

1
<!-- Flex容器 -->
2
<div class="flex-container">
3
    <!-- Flex項目1 -->
4
    <div class="flex-item">Item 1</div>
5
    <!-- Flex項目2 -->
6
    <div class="flex-item">Item 2</div>
7
    <!-- Flex項目3 -->
8
    <div class="flex-item">Item 3</div>
9
</div>

效果：

示例效果

彈性佈局 Flex

評論