Robi.Run
登入

有想到什麼再寫什麼，沒想到什麼就算了

css flex 的使用範例

2024-11-05 00:28 by @robi

Flexbox 是 CSS 中一個強大的佈局模型，它提供了一個靈活且易於使用的方式來排列和對齊網頁元素。無論是建立響應式佈局、對齊項目、分配空間，Flexbox 都能輕鬆應對。

1. 基本 Flexbox 容器和項目

首先，我們需要將一個 HTML 元素指定為 Flex 容器。這可以使用 display: flex 屬性來完成。容器內的任何子元素都會自動變成 Flex 項目。

<div class="container">
  <div class="item">項目 1</div>
  <div class="item">項目 2</div>
  <div class="item">項目 3</div>
</div>


.container {
  display: flex;
  width: 300px;
  border: 1px solid black;
}

.item {
  width: 100px;
  height: 50px;
  background-color: lightblue;
  margin: 5px;
}

在這個範例中，.container 元素被指定為 Flex 容器，而三個 .item 元素則被自動視為 Flex 項目。每個項目都具有設定的寬度和高度，並帶有背景顏色和間距。

2. 主軸對齊

Flexbox 允許我們根據 flex-direction 屬性來控制項目在主軸上的排列方向。默認情況下，主軸為水平方向，項目從左到右排列。

.container {
  /* 默認主軸方向為水平 */
  flex-direction: row; /* 默認值 */
}

.container {
  /* 將主軸方向改為垂直 */
  flex-direction: column; 
}

3. 副軸對齊

除了主軸對齊，我們也可以使用 align-items 屬性來控制 Flex 項目在副軸上的對齊方式。默認情況下，副軸對齊方式為 stretch，項目會填滿整個容器高度。

.container {
  /* 默認副軸對齊方式為伸展 */
  align-items: stretch; /* 默認值 */
}

.container {
  /* 將副軸對齊方式改為頂部 */
  align-items: flex-start;
}

.container {
  /* 將副軸對齊方式改為底部 */
  align-items: flex-end;
}

.container {
  /* 將副軸對齊方式改為居中 */
  align-items: center;
}

4. 項目對齊

justify-content 屬性允許我們控制 Flex 項目在主軸上的對齊方式。默認情況下，項目會根據 flex-direction 的值排列在主軸的開始或結束位置。

.container {
  /* 默認主軸對齊方式為開始位置 */
  justify-content: flex-start; /* 默認值 */
}

.container {
  /* 將主軸對齊方式改為結束位置 */
  justify-content: flex-end;
}

.container {
  /* 將主軸對齊方式改為居中 */
  justify-content: center;
}

.container {
  /* 將主軸對齊方式改為項目之間平均分佈 */
  justify-content: space-between;
}

.container {
  /* 將主軸對齊方式改為項目之間平均分佈，並在兩端留出空間 */
  justify-content: space-around;
}

5. Flex 項目屬性

Flex 項目也擁有一些屬性可以控制它們在 Flex 容器中的佈局和對齊方式。

  • flex-grow: 控制 Flex 項目在容器中擴展的比例。默認值為 0，表示項目不會擴展。
  • flex-shrink: 控制 Flex 項目在容器中縮小的比例。默認值為 1，表示項目會縮小以適應容器。
  • flex-basis: 指定 Flex 項目在容器中佔用的空間。默認值為 auto，表示項目根據其內容大小佔用空間。
  • order: 控制 Flex 項目在容器中排列的順序。默認值為 0，表示項目按照其在 HTML 中的順序排列。

6. 響應式佈局

Flexbox 可以輕鬆建立響應式佈局。例如，我們可以根據螢幕大小調整 Flex 項目的排列方式和對齊方式。

@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }

  .item {
    width: 100%;
  }
}

結論

Flexbox 提供了一個功能強大且易於使用的佈局模型，可以輕鬆地控制網頁元素的排列和對齊方式。通過使用 Flexbox，我們可以建立響應式佈局、對齊項目、分配空間，並打造更具吸引力的網頁設計。

提示