CSS Flexbox指南

Flexbox 是一種用於一維佈局的CSS 彈性盒子模型，通過設置容器為display: flex 來實現子元素的自動調整；1. 容器使用display: flex 定義彈性佈局；2. flex-direction 設置主軸方向；3. justify-content 控制主軸對齊；4. align-items 控制交叉軸對齊；5. flex-wrap 決定是否換行；6. align-content 管理多行對齊；項目可使用flex-grow、flex-shrink、flex-basis 調整大小，或通過flex 簡寫統一設置，align-self 實現單獨對齊；常見應用包括居中、導航欄、等高列和聖杯佈局，配合min-width: 0 和媒體查詢可解決溢出與響應式問題，該模型兼容性良好且易於掌握。

CSS Flexbox 是一種強大的佈局模型，特別適合在頁面上對齊、分佈和調整元素的大小。它讓響應式設計變得更簡單，尤其適用於一維佈局（行或列）。下面是一個實用的Flexbox 指南，幫你快速掌握核心概念和常用技巧。

什麼是Flexbox？

Flexbox（彈性盒子佈局）是一種CSS 佈局方式，通過設置容器為display: flex ，可以讓子元素自動調整大小和位置，以適應可用空間。

它主要由兩個部分組成：

• 容器（Flex Container） ：應用display: flex的父元素。
• 項目（Flex Items） ：容器內的直接子元素。

容器上的常用屬性

1. display: flex

開啟Flexbox 佈局。

 .container {
  display: flex;
}

注意： display: flex使容器成為塊級彈性容器， display: inline-flex則為行內彈性容器。

2. flex-direction

定義主軸方向（項目排列方向）。

 .container {
  flex-direction: row | row-reverse | column | column-reverse;
}

• row （默認）：從左到右
• column ：從上到下

3. justify-content

在主軸上對齊項目。

 .container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}

• center ：居中
• space-between ：兩端對齊，中間間距相等
• space-around ：每個項目周圍空間相等

4. align-items

在交叉軸上對齊項目（垂直方向，當主軸是橫向時）。

 .container {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

• center ：垂直居中
• stretch （默認）：拉伸填滿容器（除非項目設置了高度）

5. flex-wrap

控制是否換行。

 .container {
  flex-wrap: nowrap | wrap | wrap-reverse;
}

• wrap ：允許換行
• wrap-reverse ：反向換行（從下往上）

6. align-content

當有多行時，控制行與行之間的對齊方式（需啟用flex-wrap: wrap ）。

 .container {
  align-content: stretch | center | flex-start | flex-end | space-between | space-around;
}

項目上的常用屬性

1. flex-grow

定義項目的放大比例（默認為0，不放大）。

 .item {
  flex-grow: 1; /* 佔據剩餘空間*/
}

2. flex-shrink

定義項目的縮小比例（默認為1，空間不足時會縮小）。

 .item {
  flex-shrink: 0; /* 禁止縮小*/
}

3. flex-basis

設置項目在分配多餘空間前的初始大小。

 .item {
  flex-basis: 100px; /* 基礎寬度為100px */
}

可以設為auto （根據內容）或具體值（如20% 、 150px ）。

4. flex （簡寫）

flex-grow 、 flex-shrink和flex-basis的簡寫。

 .item {
  flex: 1; /* 等價於flex: 1 1 0% */
  flex: 0 1 auto; /* 默認值*/
  flex: 2 1 150px;
}

推薦使用簡寫形式，更簡潔。

5. align-self

允許單個項目覆蓋align-items的對齊方式。

 .item {
  align-self: center; /* 單獨居中*/
}

常見佈局示例

1. 水平垂直居中

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

一行代碼實現居中，比傳統方法簡單得多。

2. 導航欄（兩端對齊）

 .nav {
  display: flex;
  justify-content: space-between;
}

3. 等高列佈局

.row {
  display: flex;
}
.column {
  flex: 1;
  margin: 10px;
}

所有列高度自動一致，無需設置固定高度。

4. 聖杯佈局（頭部、內容、尾部）

 .layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.header, .footer {
  flex: 0 0 auto;
  height: 60px;
}

.main {
  flex: 1;
  background: #f0f0f0;
}

主內容自動填滿剩餘空間。

實用技巧和注意事項

• 避免在flex 項目上設置width: 100% ：可能會導致佈局異常，特別是當flex-basis或flex-grow起作用時。
• min-width: 0修復溢出問題：如果flex 項目內有長文本或固定元素，可能溢出容器。添加min-width: 0可讓項目正常收縮。
• 響應式結合媒體查詢：用flex-direction: column在小屏幕上堆疊元素。

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

基本上就這些核心內容。 Flexbox 不復雜，但非常實用。多練習幾個佈局（比如卡片、導航、表單），很快就能熟練掌握。

別忘了瀏覽器支持良好（IE10 ），可以放心使用。

以上是CSS Flexbox指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！