彈性盒模型（Flexbox）
Flexbox 是一種用來設計一維佈局的 CSS 模型。它可以讓我們輕鬆地排列、對齊和分配空間給容器中的項目，即使它們的大小是未知或動態的。
Flex 容器與項目
- Flex 容器：設置
display: flex或display: inline-flex的元素稱為 Flex 容器。 - Flex 項目：Flex 容器的子元素自動成為 Flex 項目。
.container {
display: flex;
}
Flex 容器屬性
flex-direction
設置主軸（主軸方向）的方向。可以是 row（默認）、row-reverse、column 或 column-reverse。
.container {
flex-direction: row;
}
justify-content
沿主軸對齊 Flex 項目。可以是 flex-start、flex-end、center、space-between 或 space-around。.container {
justify-content: center;
}
align-items
沿交叉軸對齊 Flex 項目。可以是 flex-start、flex-end、center、baseline 或 stretch（默認）。
.container {
align-items: center;
}
flex-wrap
設置 Flex 項目是否換行。可以是 nowrap（默認）、wrap 或 wrap-reverse。
.container {
flex-wrap: wrap;
}
align-content
沿交叉軸對齊多行 Flex 項目。可以是 flex-start、flex-end、center、space-between、space-around 或 stretch（默認）。僅在 Flex 容器內有多行時有效。
.container {
align-content: center;
}
Flex 項目屬性
order
設置 Flex 項目的排列順序，默認值為 0。數值越小，排列越靠前。
.item {
order: 1;
}
flex-grow
設置 Flex 項目的擴展比例，默認值為 0。數值越大，項目擴展越多。
.item {
flex-grow: 1;
}
flex-shrink
設置 Flex 項目的收縮比例，默認值為 1。數值越大，項目收縮越多。
.item {
flex-shrink: 1;
}
flex-basis
設置 Flex 項目的基礎大小，可以是長度值（如 px、%）或 auto（默認）。
.item {
flex-basis: 100px;
}
align-self
設置單個 Flex 項目在交叉軸上的對齊方式，覆蓋 align-items 設置。可以是 auto（默認）、flex-start、flex-end、center、baseline 或 stretch。
.item {
align-self: center;
}
彈性盒模型實踐
我們將通過一個示例來實踐 Flexbox 的基本用法。
示例
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox 實踐示例</title>
<style>
.container {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
height: 200px;
border: 1px solid #ccc;
}
.item {
width: 100px;
height: 100px;
background-color: lightblue;
text-align: center;
line-height: 100px;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
</body>
</html>
Flexbox 排版案例
下面是一個更複雜的 Flexbox 排版案例，展示了多行 Flex 項目、不同的對齊方式和項目屬性。
案例
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox 排版案例</title>
<style>
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-content: space-around;
height: 400px;
border: 1px solid #ccc;
}
.item {
width: 100px;
height: 100px;
background-color: lightcoral;
margin: 10px;
text-align: center;
line-height: 100px;
}
.item:nth-child(odd) {
background-color: lightseagreen;
}
.item-grow {
flex-grow: 1;
}
</style>
</head>
<body>
<div class="container">
<div class="item item-grow">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item item-grow">Item 5</div>
<div class="item">Item 6</div>
</div>
</body>
</html>
這個案例展示了一個 Flex 容器，包含多個 Flex 項目，其中一些項目使用了 flex-grow 屬性來擴展佔用可用空間。通過這個實踐，你應該能夠更加靈活地使用 Flexbox 來創建各種佈局。
