CSS Flexbox

1
2
3
4
5
6
7
8

親自試一試

CSS Flexbox 布局模塊

在 Flexbox 布局模塊（問世）之前，可用的布局模式有以下四種：

  • 塊（Block），用于網頁中的部分（節）
  • 行內（Inline），用于文本
  • 表，用于二維表數據
  • 定位，用于元素的明確位置

彈性框布局模塊，可以更輕松地設計靈活的響應式布局結構，而無需使用浮動或定位。

瀏覽器支持

所有現代瀏覽器均支持 flexbox 屬性。

29.0 11.0 22.0 10 48

Flexbox 元素

如需開始使用 Flexbox 模型，您需要首先定義 Flex 容器。

1
2
3

上面的元素表示一個帶有三個 flex 項目的 flex 容器（藍色區域）。

實例

含有三個 flex 項目的 flex 容器：

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

親自試一試

父元素（容器）

通過將 display 屬性設置為 flex，flex 容器將可伸縮：

1
2
3

實例

.flex-container {
  display: flex;
}

親自試一試

以下是 flex 容器屬性：

flex-direction 屬性

flex-direction 屬性定義容器要在哪個方向上堆疊 flex 項目。

1
2
3

實例

column 值設置垂直堆疊 flex 項目（從上到下）：

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

親自試一試

實例

column-reverse 值垂直堆疊 flex 項目（但從下到上）：

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

親自試一試

實例

row 值水平堆疊 flex 項目（從左到右）：

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

親自試一試

實例

row-reverse 值水平堆疊 flex 項目（但從右到左）：

.flex-container {
  display: flex;
  flex-direction: row-reverse;
}

親自試一試

flex-wrap 屬性

flex-wrap 屬性規定是否應該對 flex 項目換行。

下面的例子包含 12 個 flex 項目，以便更好地演示 flex-wrap 屬性。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

實例

wrap 值規定 flex 項目將在必要時進行換行：

.flex-container {
  display: flex;
  flex-wrap: wrap;
}

親自試一試

實例

nowrap 值規定將不對 flex 項目換行（默認）：

.flex-container {
  display: flex;
  flex-wrap: nowrap;
}

親自試一試

實例

wrap-reverse 值規定如有必要，彈性項目將以相反的順序換行：

.flex-container {
  display: flex;
  flex-wrap: wrap-reverse;
}

親自試一試

flex-flow 屬性

flex-flow 屬性是用于同時設置 flex-direction 和 flex-wrap 屬性的簡寫屬性。

實例

.flex-container {
  display: flex;
  flex-flow: row wrap;
}

親自試一試

justify-content 屬性

justify-content 屬性用于對齊 flex 項目：

1
2
3

實例

center 值將 flex 項目在容器的中心對齊：

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

親自試一試

實例

flex-start 值將 flex 項目在容器的開頭對齊（默認）：

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

親自試一試

實例

flex-end 值將 flex 項目在容器的末端對齊：

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

親自試一試

實例

space-around 值顯示行之前、之間和之后帶有空格的 flex 項目：

.flex-container {
  display: flex;
  justify-content: space-around;
}

親自試一試

實例

space-between 值顯示行之間有空格的 flex 項目：

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

親自試一試

align-items 屬性

align-items 屬性用于垂直對齊 flex 項目。

1
2
3

在這些例子中，我們使用 200 像素高的容器，以便更好地演示 align-items 屬性。

實例

center 值將 flex 項目在容器中間對齊：

.flex-container {
  display: flex;
  height: 200px;
  align-items: center;
}

親自試一試

實例

flex-start 值將 flex 項目在容器頂部對齊：

.flex-container {
  display: flex;
  height: 200px;
  align-items: flex-start;
}

親自試一試

實例

flex-end 值將彈性項目在容器底部對齊：

.flex-container {
  display: flex;
  height: 200px;
  align-items: flex-end;
}

親自試一試

實例

stretch 值拉伸 flex 項目以填充容器（默認）：

.flex-container {
  display: flex;
  height: 200px;
  align-items: stretch;
}

親自試一試

實例

baseline 值使 flex 項目基線對齊：

.flex-container {
  display: flex;
  height: 200px;
  align-items: baseline;
}

親自試一試

注意：該例使用不同的 font-size 來演示項目已按文本基線對齊：

1
2
3
4

align-content 屬性

align-content 屬性用于對齊彈性線。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

在這些例子中，我們使用 600 像素高的容器，并將 flex-wrap 屬性設置為 wrap，以便更好地演示 align-content 屬性。

實例

space-between 值顯示的彈性線之間有相等的間距：

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: space-between;
}

親自試一試

實例

space-around 值顯示彈性線在其之前、之間和之后帶有空格：

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: space-around;
}

親自試一試

實例

stretch 值拉伸彈性線以占據剩余空間（默認）：

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: stretch;
}

親自試一試

實例

center 值在容器中間顯示彈性線：

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: center;
}

親自試一試

實例

flex-start 值在容器開頭顯示彈性線：

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: flex-start;
}

親自試一試

實例

flex-end 值在容器的末尾顯示彈性線：

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: flex-end;
}

親自試一試

完美的居中

在下面的例子中，我們會解決一個非常常見的樣式問題：完美居中。

解決方案：將 justify-content 和 align-items 屬性設置為居中，然后 flex 項目將完美居中：

實例

.flex-container {
  display: flex;
  height: 300px;
  justify-content: center;
  align-items: center;
}

親自試一試

子元素（項目）

flex 容器的直接子元素會自動成為彈性（flex）項目。

1
2
3
4

上面的元素代表一個灰色 flex 容器內的四個藍色 flex 項目。

實例

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div> 
  <div>4</div>
</div>

親自試一試

用于彈性項目的屬性有：

  • order
  • flex-grow
  • flex-shrink
  • flex-basis
  • flex
  • align-self

order 屬性

order 屬性規定 flex 項目的順序。

1
2
3
4

代碼中的首個 flex 項目不必在布局中顯示為第一項。

order 值必須是數字，默認值是 0。

實例

order 屬性可以改變 flex 項目的順序：

<div class="flex-container">
  <div style="order: 3">1</div>
  <div style="order: 2">2</div>
  <div style="order: 4">3</div> 
  <div style="order: 1">4</div>
</div>

親自試一試

flex-grow 屬性

flex-grow 屬性規定某個 flex 項目相對于其余 flex 項目將增長多少。

1
2
3

該值必須是數字，默認值是 0。

實例

使第三個彈性項目的增長速度比其他彈性項目快八倍：

<div class="flex-container">
  <div style="flex-grow: 1">1</div>
  <div style="flex-grow: 1">2</div>
  <div style="flex-grow: 8">3</div> 
</div>

親自試一試

flex-shrink 屬性

flex-shrink 屬性規定某個 flex 項目相對于其余 flex 項目將收縮多少。

1
2
3
4
5
6
7
8
9

該值必須是數字，默認值是 0。

實例

不要讓第三個彈性項目收縮得與其他彈性項目一樣多：

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex-shrink: 0">3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
</div>

親自試一試

flex-basis 屬性

flex-basis 屬性規定 flex 項目的初始長度。

1
2
3
4

實例

將第三個彈性項目的初始長度設置為 200 像素：

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex-basis: 200px">3</div>
  <div>4</div>
</div>

親自試一試

flex 屬性

flex 屬性是 flex-grow、flex-shrink 和 flex-basis 屬性的簡寫屬性。

實例

使第三個彈性項目不可增長（0），不可收縮（0），且初始長度為 200 像素：

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex: 0 0 200px">3</div>
  <div>4</div>
</div>

親自試一試

align-self 屬性

align-self 屬性規定彈性容器內所選項目的對齊方式。

align-self 屬性將覆蓋容器的 align-items 屬性所設置的默認對齊方式。

1
2
3
4

在這些例子中，我們使用 200 像素高的容器，以便更好地演示 align-self 屬性：

實例

把第三個彈性項目對齊到容器的中間：

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="align-self: center">3</div>
  <div>4</div>
</div>

親自試一試

實例

將第二個彈性項目在容器頂部對齊，將第三個彈性項目在容器底部對齊：

<div class="flex-container">
  <div>1</div>
  <div style="align-self: flex-start">2</div>
  <div style="align-self: flex-end">3</div>
  <div>4</div>
</div>

親自試一試

使用 Flexbox 的響應式圖庫

使用 flexbox 創建響應式圖像庫，該圖像庫根據屏幕大小在四幅、兩幅或全寬圖像之間變化：

親自試一試

使用 Flexbox 的響應式網站

使用 flexbox 創建響應式網站，其中包含彈性導航欄和彈性內容：

親自試一試

CSS Flexbox 屬性

下表列出了與 flexbox 一起使用的 CSS 屬性：

屬性 描述
display 規定用于 HTML 元素的盒類型。
flex-direction 規定彈性容器內的彈性項目的方向。
justify-content 當彈性項目沒有用到主軸上的所有可用空間時，水平對齊這些項目。
align-items 當彈性項目沒有用到主軸上的所有可用空間時，垂直對齊這些項。
flex-wrap 規定彈性項目是否應該換行，若一條 flex 線上沒有足夠的空間容納它們。
align-content 修改 flex-wrap 屬性的行為。與 align-items 相似，但它不對齊彈性項目，而是對齊 flex 線。
flex-flow flex-direction 和 flex-wrap 的簡寫屬性。
order 規定彈性項目相對于同一容器內其余彈性項目的順序。
align-self 用于彈性項目。覆蓋容器的 align-items 屬性。
flex flex-grow、flex-shrink 以及 flex-basis 屬性的簡寫屬性。