CSS - Flexbox

上一頁
下一頁

Flexbox 在容器內沿單一維度（水平或垂直）組織元素。

什麼是 CSS Flexbox？

CSS flexbox 是 CSS 中的一種佈局模型，它提供了一種高效且靈活的方式來排列和分配容器內專案之間的空間。它在一個維度（水平或垂直）內排列容器中的元素。

在本文中，我們將簡要介紹所有用於管理主軸和交叉軸上元素的定位、對齊和間隙的屬性。

目錄


 

Flexbox 元素

  • Flexbox 容器：Flex 容器定義了 flexbox 的外部元素，所有子元素都位於其中。可以透過設定`display: flex` 或 `display: inline-flex` 來定義 flexbox 容器。
  • Flexbox 專案：Flexbox 專案是 flexbox 容器的直接子元素。這些專案可以根據需要在 flexbox 容器內垂直和水平排列。
  • 主軸：主軸是容器內專案排列的主要軸線。預設情況下，它是水平軸線。
  • 交叉軸：交叉軸與主軸垂直。預設情況下，它是垂直軸線。

下圖將演示 CSS Flexbox

CSS Flexbox

基本的 Flexbox 佈局

Flexbox 常用於建立響應式 flexbox 佈局。

示例

<!DOCTYPE html>
<html lang="en">
<head>
   <style>
      .container {
         display: flex;
         flex-direction: row;
         justify-content: space-between;
         align-items: center;
         height: 100vh;
      }
      .item {
         background-color: lightcoral;
         padding: 20px;
         margin: 10px;
         border: 3px solid #ccc;
      }
   </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 佈局

在 CSS 中，我們還可以透過設定`flex-direction: column` 來定義垂直 flexbox。

示例

<!DOCTYPE html>
<html lang="en">
<head>
   <style>
      .container {
         display: flex;
         flex-direction: column;
         justify-content: center;
         align-items: center;
         height: 100vh;
      }
      .item {
         background-color: lightseagreen;
         padding: 20px;
         margin: 10px;
         border: 3px solid #ccc;
      }
   </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 Justify Content 屬性

`justify-content` 屬性通常用於 flexbox 容器內，用於對齊容器內的 flexbox 專案。此屬性有多個可能的值，有關 `justify-content` 屬性的完整參考，請訪問我們關於`justify-content` 屬性 的教程。

下面列出了一些常用的 `justify-content` 值。還有很多其他值與之相關。

// Align Item at center of main axis
justify-content: center; 

// Align Item at start of main axis
justify-content: flex-start; 

// Align Item at end of main axis
justify-content: flex-end; 

// Align Item at left side of main axis
justify-content: left;

// Align Item at right side of main axis
justify-content: right;

Flexbox Align Items 屬性

CSS 中的`align-items` 屬性用於沿容器的交叉軸線（在行佈局中為垂直軸線，在列布局中為水平軸線）對齊 flex 專案。此屬性有多個關聯值。要了解有關`align-items` 屬性的更多資訊，請訪問我們關於CSS Align Items 的教程。

// Align items at start of cross axis of container
align-items: flex-start;

// Align items at end of cross axis of container
align-items: flex-end;

// Align items at center of cross axis of container
align-items: center;

// Align baselines of items (For items with variable sizes)
align-items: baseline;

// Stretch items along cross axis to fill container
align-items: stretch;

使用 Flexbox 居中 Div

居中 div 元素（或任何其他元素）始終是 CSS 中一個具有挑戰性且討論最多的問題。藉助 CSS flexbox，我們可以輕鬆地將 div 元素居中於容器內。我們必須使用`justify-content` 和`align-items` 屬性來居中專案，以下程式碼顯示瞭如何操作。

示例

<!DOCTYPE html>
<html lang="en">
<head>
   <style>
      .flex-container {
         display: flex;
         /* Center horizontally */
         justify-content: center;
         /* Center Vertically */
         align-items: center;
         border: 1px solid #ccc;
         height: 250px;
         background-color: grey;
      }

      .flex-item {
         background-color: lightblue;
         border: 1px solid #333;
         padding: 5px;
         height: 70px;
         width: 70px;
      }  
   </style>
</head>

<body>
   <div class="flex-container">
      <div class="flex-item">
         This div is in center of container
      </div>
   </div>
</body>
</html>

Flexbox Wrap 屬性

帶有 wrap 屬性的 Flexbox 允許容器內的專案在單行空間不足時換行。這有助於維護響應式佈局。

以下程式碼演示瞭如何使用 flexbox 建立響應式佈局，該佈局居中其專案並將它們換行以適應可用空間。有關 flex wrap 的完整指南，請訪問我們關於CSS flex-wrap 的教程。

.container {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   align-items: center;
}
.item {
   padding: 20px;
   margin: 10px;
   /* base size 100px */
   flex: 1 1 100px; 
}

Flexbox Align Self 屬性

在 CSS 中，我們有`align-self` 屬性，它可以用於覆蓋容器上設定的`align-items` 屬性。這有助於動態地將每個專案放置在容器內的特殊位置。

以下程式碼顯示瞭如何使用`align-self` 屬性。在這裡我們可以看到`align-items: stretch` 不適用於第二個和第三個專案，此屬性被專案的`align-self` 屬性覆蓋。

.container {
   display: flex;
   flex-direction: row;
   justify-content: space-around;
   align-items: stretch;
   height: 250px;
}
.item {
   background-color: lightpink;
   padding: 20px;
   margin: 10px;
   border: 1px solid #ccc;
}
.item:nth-child(2) {
   /* Center 2nd item along the cross axis */
   align-self: center; 
}
.item:nth-child(3) {
   /* Align 3rd item at the end of the cross axis */
   align-self: flex-end; 
}

CSS Flexbox 容器屬性

以下是所有可以應用於 flex 容器的 CSS 屬性。

屬性 值 示例
flex-direction 設定 flex 專案的 flex 方向。
flex-wrap 設定 flex 專案是否應換行到下一行。
justify-content 設定 flex 專案沿主軸的對齊方式。
align-items 設定 flex 專案沿交叉軸的對齊方式。
align-content 設定 flex 容器內 flex 行的對齊方式和間距。
flex-flow 同時設定 flex-direction 和 flex-wrap 屬性。

CSS Flexbox 專案屬性

以下是所有可以應用於 flex 專案的 CSS 屬性。

屬性 值 示例
flex-grow 設定 flex 專案在 flex 容器內增長。
flex-shrink 設定 flex 專案縮小尺寸以適應可用空間。
flex-basis 設定 flex 專案的初始大小。
flex 簡寫屬性，組合三個與 flex 相關的屬性：flex-grow、flex-shrink 和 flex-basis。
align-self 設定特定 flex 專案沿交叉軸的對齊方式。
order 用於指定 flex 專案在其 flex 容器內出現的順序。
列印頁面
上一頁
下一頁
廣告