3.1 Flexbox
使用 Flexbox 和 Grid 創建彈性佈局是現代響應式網站開發的關鍵技術。這些技術允許你輕鬆管理頁面上元素的位置，確保它們適應不同的螢幕尺寸和設備。
Flexbox（Flexible Box Layout Module）旨在為元素提供一維的佈局（要麼按行，要麼按列）。Flexbox 簡化了彈性和響應式佈局的創建。
Flexbox 的核心概念：
- Flex 容器：應用
display: flex的元素 - Flex 元素：在 flex 容器內的子元素
Flexbox 屬性
Flex 容器：
display: flex：定義元素為 flex 容器flex-direction：設置 flex 元素的排列方向（row,column,row-reverse,column-reverse）justify-content：管理 flex 元素在主軸上的對齊（flex-start,flex-end,center,space-between,space-around）align-items：管理 flex 元素在交叉軸上的對齊（stretch,flex-start,flex-end,center,baseline）
Flex 元素：
flex-grow：確定元素在有剩餘空間時的增長能力flex-shrink：確定元素在空間不足時的縮小能力flex-basis：設置元素在分配剩餘空間之前的初始大小align-self：重寫在align-items中設置的元素在交叉軸上的對齊
Flexbox 使用示例
創建一個具有三個列的佈局，它會適應不同大小的螢幕：
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox 範例</title>
<style>
.flex-container {
display: flex;
justify-content: space-between;
align-items: stretch;
flex-wrap: wrap;
}
.flex-item {
flex: 1 1 200px;
margin: 10px;
padding: 20px;
background-color: #f4f4f4;
text-align: center;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">列 1</div>
<div class="flex-item">列 2</div>
<div class="flex-item">列 3</div>
</div>
</body>
</html>
代碼解釋：
-
.flex-container：將容器設為 flex 容器，元素之間有均等的間距，並允許元素在空間不足時換行 -
.flex-item：flex 元素，佔用相同空間，最低寬度 200px，均勻分佈於容器內
3.2 CSS Grid
CSS Grid Layout 是一種 二維佈局系統，允許使用行和列創建複雜的佈局。
CSS Grid 的核心概念：
- Grid 容器：應用
display: grid的元素 - Grid 元素：位於 grid 容器格線中的子元素
CSS Grid 屬性
Grid 容器：
display: grid：定義元素為 grid 容器grid-template-columns：設置網格中列的數量和大小grid-template-rows：設置網格中行的數量和大小gap：管理行和列之間的間距justify-items：管理 grid 元素的水平對齊align-items：管理 grid 元素的垂直對齊
grid-column：確定元素跨越的列數grid-row：確定元素跨越的行數justify-self：重寫元素的水平對齊align-self：重寫元素的垂直對齊
Grid 元素：
CSS Grid 使用示例
創建一個具有三個列和兩個行的佈局，會適應不同大小的螢幕。
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grid 範例</title>
<style>
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
gap: 10px;
}
.grid-item {
padding: 20px;
background-color: #e4e4e4;
text-align: center;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item">元素 1</div>
<div class="grid-item">元素 2</div>
<div class="grid-item">元素 3</div>
<div class="grid-item">元素 4</div>
<div class="grid-item">元素 5</div>
<div class="grid-item">元素 6</div>
</div>
</body>
</html>
代碼解釋：
.grid-container：將容器設為 grid 容器，具有三個列和兩個行，每個元素佔用相同的空間.grid-item：grid 元素，具有均勻的內邊距和背景色
GO TO FULL VERSION