如何使用 css flexbox 排版 ul li 標籤

更新日期： 2024 年 10 月 29 日

在網頁開發中，CSS 的 flexbox 是一種非常好用的布局方式，特別適合用來排列橫向或直向的元素。

今天，我們來介紹如何使用 flexbox 來排版 <ul><li> 標籤，並實現一些常見的效果。

<ul> 和 <li> 是用來建立無序清單的標籤，而用 flexbox 來控制這些標籤的排列，可以讓我們更靈活地創建符合設計需求的排版。

基本設定：將 <ul> 設定為 flex 容器

要使用 flexbox 排版，我們首先需要將 <ul> 設置為 flex 容器，這樣它的子元素（也就是每個 <li>）就會依據 flex 規則排列。

HTML 結構

<ul class="flex-container">
  <li>項目 1</li>
  <li>項目 2</li>
  <li>項目 3</li>
</ul>

CSS 設定

.flex-container {
  display: flex;
}

在這裡，我們給 <ul> 添加 display: flex;，讓它變成 flex 容器，這樣每個 <li> 項目就可以依照 flex 的排列方式來排版。

控制子元素排列方向：flex-direction

flex-direction 決定了 <li> 子元素的排列方向。

常見的排列方式有水平和垂直。

水平排列（默認）

.flex-container {
  display: flex;
  flex-direction: row; /* 預設為 row */
}

這樣會讓 <li> 元素從左到右橫向排列。

垂直排列

如果希望 <li> 元素垂直排列，可以這樣設置：

.flex-container {
  display: flex;
  flex-direction: column;
}

這樣 <li> 元素就會垂直從上到下排列。

控制子元素對齊方式：justify-content 和 align-items

justify-content 用來控制子元素在主軸（水平或垂直）上的對齊方式，而 align-items 用來控制子元素在交叉軸上的對齊方式。

水平居中排列

如果希望 <li> 元素在 ul 的中間，設定 justify-content 為 center：

.flex-container {
  display: flex;
  justify-content: center;
}

這樣會讓所有 <li> 元素在水平方向上居中排列。

垂直居中排列

如果希望 <li> 元素在垂直方向上居中，設置 align-items: center;：

.flex-container {
  display: flex;
  align-items: center;
  height: 200px; /* 設置容器高度，方便觀察效果 */
}

子元素間距：gap

gap 可以讓我們很方便地設置 <li> 元素之間的距離，不需要額外調整 margin。

.flex-container {
  display: flex;
  gap: 10px; /* 設置子元素之間的間距 */
}

這樣每個 <li> 元素之間會有 10px 的間距。

子元素自適應大小：flex-grow

如果希望每個 <li> 元素均勻分配空間，可以使用 flex-grow 讓它們自適應容器大小。

設置每個項目均分空間

.flex-container {
  display: flex;
}

.flex-container li {
  flex-grow: 1;
}

這樣每個 <li> 會均勻地填滿整個容器的寬度。

完整範例：實現水平方向間隔排列的 <ul><li>

以下是一個完整範例，展示了如何使用 flexbox 來排列 <ul><li>，並讓每個項目間隔顯示且居中。

HTML

<ul class="flex-container">
  <li>項目 1</li>
  <li>項目 2</li>
  <li>項目 3</li>
  <li>項目 4</li>
</ul>

CSS

.flex-container {
  display: flex;
  justify-content: space-around; /* 子元素水平方向間隔排列 */
  align-items: center;           /* 子元素在垂直方向居中 */
  list-style-type: none;          /* 移除無序列表的點符號 */
  padding: 0;                     /* 移除內邊距 */
  margin: 0;                      /* 移除外邊距 */
}

.flex-container li {
  padding: 10px 20px;             /* 設置內邊距，讓項目顯得更大一些 */
  background-color: #f0f0f0;      /* 添加背景色，方便觀察效果 */
  border-radius: 5px;             /* 圓角效果 */
}

在這個範例中，我們使用 justify-content: space-around; 讓每個 <li> 元素之間均勻間隔排列，並且讓元素在水平方向上填滿整個容器。

align-items: center; 保證它們在垂直方向上居中。

小結

使用 flexbox 來排版 <ul><li> 標籤非常靈活，只需要幾行代碼就能實現不同的排列效果。

這裡總結一下：

• display: flex;：將 <ul> 設定為 flex 容器。
• flex-direction：控制 <li> 元素的排列方向（水平或垂直）。
• justify-content 和 align-items：控制 <li> 元素的對齊方式。
• gap：設置 <li> 元素之間的間距。
• flex-grow：讓 <li> 元素均勻分配空間。

通過這些基本的 flexbox 設定，無論是橫向排列、均勻分布，還是垂直堆疊，都能輕鬆實現。新手可以從這些基礎操作開始練習，逐步掌握 flexbox 的強大功能。