CSS Flexbox 深入探究

第 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.

• Example:

  @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

1. Create a navigation bar using Flexbox, with the logo on the left and the links on the right.
2. Create a three-column layout that wraps into one column on smaller screens.
3. 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中文網其他相關文章！