5.1 Flexbox 的基本概念
Flexbox (Flexible Box Layout) 是一個強大的 CSS 排版系統，它提供靈活而高效的方法來分配容器內空間和對齊元素。Flexbox 對於創建複雜的佈局和響應式設計特別有用。現在我們來了解一下 Flexbox 的基礎，包括創建 Flex 容器和元素，以及使用屬性 display: flex;。
Flexbox 的基本概念
Flexbox 由兩個關鍵組件組成：
- Flex 容器: 父元素，包含 Flex 元素。
- Flex 元素: Flex 容器內的子元素，按照 Flexbox 的規則對齊和分配。
Flex 容器
Flex 容器是透過屬性 display: flex; 或 display: inline-flex; 創建的。Flex 容器控制其子元素（Flex 元素）的佈局，並提供多種對齊和分配的可能性。
CSS
.container {
display: flex; /* 或 inline-flex */
}
使用示例：
CSS
.container {
display: flex;
border: 2px solid #000;
padding: 10px;
}
.item {
background-color: #3498db;
color: white;
padding: 10px;
margin: 5px;
}
HTML
<div class="container">
<div class="item">元素 1</div>
<div class="item">元素 2</div>
<div class="item">元素 3</div>
</div>
代碼解釋：
-
.container: 使用display: flex;創建的 Flex 容器。在這個容器中，元素按照 Flexbox 的規則對齊和分配。 .item: 是 Flex 容器的子元素，作為 Flex 元素。
5.2 Flex 容器的屬性
屬性 display: flex; 定義一個元素為 Flex 容器。這個容器的子元素自動轉變為 Flex 元素並遵循 Flexbox 的規則。
display: flex;
創建一個塊級 Flex 容器。Flex 容器表現得像塊級元素，佔據父元素的整個可用寬度。
CSS
.container {
display: flex;
}
display: inline-flex;
創建一個行內 Flex 容器。Flex 容器表現得像行內元素，只佔據必要的寬度，可以與其他行內元素一起排列。
CSS
.inline-container {
display: inline-flex;
}
使用示例：
CSS
.inline-container {
display: inline-flex;
border: 2px solid #000;
padding: 10px;
}
.item {
background-color: #3498db;
color: white;
padding: 10px;
margin: 5px;
}
HTML
<div class="inline-container">
<div class="item">元素 1</div>
<div class="item">元素 2</div>
<div class="item">元素 3</div>
</div>
<div class="inline-container">
<div class="item">元素 4</div>
<div class="item">元素 5</div>
</div>
代碼解釋：
inline-container是一個 Flex 容器，使用display: inline-flex;創建。 在這個容器中，元素按照 Flexbox 的規則對齊和分配。這些容器表現得像行內元素，並可以彼此緊鄰。
5.3 Flex 元素的屬性
1. 屬性 flex 是 flex-grow、flex-shrink 和 flex-basis 的簡寫。它允許控制 Flex 元素如何拉伸和縮減以填滿可用空間。
語法：
.element {
flex: [flex-grow] [flex-shrink] [flex-basis];
}
使用示例：
CSS
.item {
flex: 1;
}
2. 屬性 order
屬性 order 定義了 Flex 元素在 Flex 容器內的排列順序。默認情況下所有元素的值為 order: 0;。
值
整數。值較小的元素將排在值較大的元素之前。
語法：
.element {
order: value;
}
使用示例：
CSS
.container {
display: flex;
border: 2px solid #000;
padding: 10px;
}
.item-1 {
order: 2;
background-color: #3498db;
color: white;
padding: 10px;
margin: 5px;
}
.item-2 {
order: 1;
background-color: #2ecc71;
color: white;
padding: 10px;
margin: 5px;
}
.item-3 {
order: 3;
background-color: #e74c3c;
color: white;
padding: 10px;
margin: 5px;
}
HTML
<div class="container">
<div class="item-1">元素 1</div>
<div class="item-2">元素 2</div>
<div class="item-3">元素 3</div>
</div>
代碼解釋：
.item-1: 具有order: 2，因此將排在具有order: 1的元素之後。.item-2: 具有order: 1，因此將排在最前面。.item-3: 具有order: 3，因此將排在最後面。
GO TO FULL VERSION