討論區
浴火重生的雞
2024-08-07|閱讀時間 ‧ 約 29 分鐘

CSS入門-Day7：佈局（二）

彈性盒模型（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 來創建各種佈局。

分享至
成為作者繼續創作的動力吧！
討論區
追蹤
討論區
追蹤
從 Google News 追蹤更多 vocus 的最新精選內容從 Google News 追蹤更多 vocus 的最新精選內容

作者的相關文章

Michael楊 的其他內容

你可能也想看

發表回應

成為會員 後即可發表留言
© 2024 vocus All rights reserved.