第 8 講：掌握 CSS Flexbox - 深入探討
在本次講座中，我們將深入探討 CSS Flexbox，這是一個強大的佈局工具，可幫助您設計回應靈敏且靈活的佈局。您將學習如何使用 Flexbox 有效地對齊、分佈和排序元素，使您的設計在不同裝置上更具適應性。
什麼是 Flexbox？
Flexbox 是「Flexible Box Layout」的縮寫，是一個 CSS 佈局模組，可以更輕鬆地設計可適應不同螢幕尺寸的佈局。它允許容器中的項目靈活排列，根據可用空間動態對齊它們。
1. Flexbox 名詞
在開始使用 Flexbox 之前，我們先來了解一下它的主要元件：
-
Flex Container：儲存 Flex 專案的父元素。
-
Flex Items：Flex 容器內的子元素。
您可以透過在容器上設定 display: flex 來啟用 Flexbox。
.flex-container {
display: flex;
}
登入後複製
現在，.flex-container 內的子元素將按照 Flexbox 規則運作。
2.彎曲方向
flex-direction 控制彈性項目在容器中放置的方向。預設情況下，項目放置在一行中。
-
價值觀：
-
row：項目水平排列（預設）。
-
row-reverse：項目水平排列，但順序相反。
-
列：項目垂直排列。
-
column-reverse：項目以相反的順序垂直排列。
範例：
.flex-container {
display: flex;
flex-direction: row; /* You can change to column */
}
登入後複製
3.證明內容合理
justify-content 用於沿著主軸對齊 Flex 項目（如果 flex-direction: row 則水平對齊；如果 flex-direction: column 則垂直對齊）。
-
價值觀：
-
flex-start：將項目與開頭對齊。
-
flex-end：將項目對齊到最後。
-
center：將專案置中。
-
space- Between: 展開項目，第一個項目在開始，最後一個項目在結束。
-
space-around：在每個項目周圍增加相等的空間。
範例：
.flex-container {
justify-content: center;
}
登入後複製
在此範例中，Flex 容器內的項目將會居中。
4.對齊項目
align-items 沿著橫軸（垂直於主軸）對齊彈性項目。
-
價值觀：
-
拉伸：拉伸項目以填充容器（預設）。
-
flex-start：將專案與橫軸的起點對齊。
-
flex-end：將項目與橫軸的末端對齊。
-
center：將專案沿橫軸居中。
範例：
.flex-container {
align-items: center;
}
登入後複製
5.彈性包裹
預設情況下，彈性項目放置在一行上，內容可能會縮小以適應。 flex-wrap 讓彈性項目在必要時換行到多行。
-
價值觀：
-
nowrap：項目保留在一行上（預設）。
-
換行：項目換行到多行。
-
反向換行：項目換行到多行，但順序相反。
範例：
.flex-container {
flex-wrap: wrap;
}
登入後複製
6.對齊內容
align-content 沿著橫軸對齊多行 Flex 專案。當容器在橫軸上有額外的空間，並且有多行彈性項目時使用。
-
價值觀：
-
flex-start：將行打包到開頭。
-
flex-end：將行打包到末尾。
-
center：將線排列到中心。
-
space- Between：均勻分佈線條，線條之間留有空間。
-
space-around：均勻分佈線條，周圍留有空間。
-
拉伸：拉伸線條以佔據可用空間。
範例：
.flex-container {
align-content: space-between;
}
登入後複製
實際範例：建立響應式照片庫
讓我們使用 Flexbox 建立一個響應式照片庫。
HTML：
<div class="gallery">
<div class="gallery-item">Image 1</div>
<div class="gallery-item">Image 2</div>
<div class="gallery-item">Image 3</div>
<div class="gallery-item">Image 4</div>
<div class="gallery-item">Image 5</div>
</div>
登入後複製
CSS：
body {
margin: 0;
font-family: Arial, sans-serif;
}
.gallery {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
gap: 10px;
padding: 20px;
}
.gallery-item {
flex-basis: calc(25% - 20px); /* Four items per row */
background-color: #ddd;
padding: 20px;
text-align: center;
}
@media screen and (max-width: 768px) {
.gallery-item {
flex-basis: calc(50% - 20px); /* Two items per row on smaller screens */
}
}
登入後複製
在此範例中：
- The .gallery container uses Flexbox to wrap the items and spread them evenly.
- Each .gallery-item takes up 25% of the container width, minus the gap.
- On smaller screens (below 768px), the items adjust to 50% width for better readability.
Responsive Design with Flexbox
Flexbox is a powerful tool for responsive design. You can easily adjust the layout by changing flex properties based on the screen size using media queries.
@media screen and (max-width: 600px) {
.gallery-item {
flex-basis: 100%; /* Items take up full width on small screens */
}
}
登入後複製
With this media query, on screens smaller than 600px, each gallery item will take up the full width of the container.
Practice Exercises
- Create a navigation bar using Flexbox, with the logo on the left and the links on the right.
- Create a three-column layout that wraps into one column on smaller screens.
- Use justify-content and align-items to create different layouts, like a centered section or a footer with evenly spaced links.
Next Up: In the next lecture, we’ll explore CSS Grid - A Deep Dive, where you’ll learn about CSS Grid and how it compares to Flexbox for building complex layouts. Stay tuned!
follow me on LinkedIn-
Ridoy Hasan
以上是CSS Flexbox 深入探究的詳細內容。更多資訊請關注PHP中文網其他相關文章！
