align-items

Baseline 廣泛可用 *

此特性已相當成熟，可在許多裝置和瀏覽器版本上使用。自 2015 年 9 月以來，該特性已在各大瀏覽器中可用。

* 此特性的某些部分可能存在不同級別的支援。

CSS 的 align-items 屬性將所有直接子元素作為一個整體來設定 align-self 的值。在 Flexbox 佈局中，它控制著子元素在交叉軸上的對齊方式。在 Grid 佈局中，它控制著子元素在其網格區域內沿塊級軸的對齊方式。

試一試

align-items: stretch;

align-items: center;

align-items: start;

align-items: end;

<section class="default-example" id="default-example">
  <div class="example-container">
    <div class="transition-all" id="example-element">
      <div>One</div>
      <div>Two</div>
      <div>Three</div>
    </div>
  </div>
</section>

#example-element {
  border: 1px solid #c5c5c5;
  display: grid;
  width: 200px;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 80px;
  grid-gap: 10px;
}

#example-element > div {
  background-color: rgb(0 0 255 / 0.2);
  border: 3px solid blue;
}

下面的互動式示例演示了在網格和 Flexbox 佈局中使用 align-items 的一些值。

語法

css

/* Basic keywords */
align-items: normal;
align-items: stretch;

/* Positional alignment */
/* align-items does not take left and right values */
align-items: center;
align-items: start;
align-items: end;
align-items: flex-start;
align-items: flex-end;
align-items: self-start;
align-items: self-end;
align-items: anchor-center;

/* Baseline alignment */
align-items: baseline;
align-items: first baseline;
align-items: last baseline;

/* Overflow alignment (for positional alignment only) */
align-items: safe center;
align-items: unsafe center;

/* Global values */
align-items: inherit;
align-items: initial;
align-items: revert;
align-items: revert-layer;
align-items: unset;

值

normal

此關鍵字的效果取決於我們所處的佈局模式。

在絕對定位佈局中，該關鍵字在可替換的絕對定位盒子上表現得像 start，而在所有其他絕對定位盒子上表現得像 stretch。
在絕對定位佈局的靜態位置上，該關鍵字的表現行為類似於 stretch。
對於彈性盒子元素，該關鍵字的表現行為類似於 stretch。
對於網格專案，這個關鍵字產生的行為類似於 stretch，但對於具有寬高比或固有尺寸的盒子，它的行為類似於 start。
該屬性不適用於塊級盒子和表格單元格。

center

彈性盒子專案的外邊距盒子在交叉軸上居中對齊。如果一個專案的交叉軸尺寸大於彈性容器，它將在兩個方向上平均溢位。

start

專案沿相應的軸線，緊挨著對齊容器的起始邊緣堆放。

end

專案沿相應的軸線，緊挨著對齊容器的結束邊緣堆放。

self-start

專案沿相應的軸線，與對齊容器中專案起始側的邊緣緊密排列。

self-end

專案沿相應的軸線，與對齊容器中專案結束側的邊緣緊密排列。

baseline、first baseline、last baseline

所有彈性專案都對齊，使其彈性容器基線對齊。交叉軸起始外邊距邊緣與其基線之間距離最大的專案將與行的交叉軸起始邊緣對齊。

stretch

如果專案的交叉軸尺寸為 auto，則使用的大小將被設定為儘可能接近填充容器所需的長度，同時尊重專案的寬度和高度限制。如果專案不是自動調整大小的，則此值回退到 flex-start，如果容器的 align-content 是 first baseline（或 baseline）或 last baseline，則回退到 self-start 或 self-end。

anchor-center

對於錨點定位元素，將專案在塊方向上與關聯的錨點元素中心對齊。請參閱使用 anchor-center 在錨點上居中。

safe

與對齊關鍵字一起使用。如果所選關鍵字意味著專案會溢位對齊容器導致資料丟失，則專案將改為像對齊模式為 start 一樣對齊。

unsafe

與對齊關鍵字一起使用。無論專案和對齊容器的相對大小如何，以及是否可能發生導致資料丟失的溢位，給定的對齊值都會被遵守。

還有兩個為 Flexbox 定義的值，因為它們基於彈性模型軸的概念，在網格佈局中也同樣有效。

flex-start: 僅在彈性佈局中使用，將彈性專案與彈性容器的主軸起始側或交叉軸起始側對齊。在彈性格式化上下文之外使用時，此值的行為與 start 相同。
flex-end: 僅在彈性佈局中使用，將彈性專案與彈性容器的主軸結束側或交叉軸結束側對齊。在彈性格式化上下文之外使用時，此值的行為與 end 相同。

正式定義

初始值	`normal`
應用於	所有元素
繼承性	否
計算值	同指定值
動畫型別	離散

正式語法

align-items = 
  normal                                    |
  stretch                                   |
  <baseline-position>                       |
  [ <overflow-position>? <self-position> ]  |
  anchor-center                             |
  dialog                                    

<baseline-position> = 
  [ first | last ]?  &&
  baseline           

<overflow-position> = 
  unsafe  |
  safe    

<self-position> = 
  center      |
  start       |
  end         |
  self-start  |
  self-end    |
  flex-start  |
  flex-end

示例

在此示例中，我們有一個包含六個子元素的容器。透過一個 <select> 下拉選單，可以在 grid 和 flex 之間切換容器的 display 屬性。第二個選單可以更改容器的 align-items 屬性值。

CSS

我們對容器和專案進行樣式設定，以確保我們有兩行或兩列專案。我們定義了 .flex 和 .grid 類，它們將透過 JavaScript 應用於容器。它們設定了容器的 display 值，並改變其背景和邊框顏色，以額外提示佈局已更改。六個彈性專案各有不同的背景顏色，其中第 4 個專案有兩行長，第 6 個專案的字型被放大。

css

.flex,
.grid {
  height: 200px;
  width: 500px;
  align-items: initial; /* Change the value in the live sample */
  border: solid 5px transparent;
  gap: 3px;
}

.flex {
  display: flex;
  flex-wrap: wrap;
  background-color: #8c8c9f;
  border-color: magenta;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 100px);
  background-color: #9f8c8c;
  border-color: slateblue;
}

#item1 {
  background-color: #8cffa0;
  min-height: 30px;
}

#item2 {
  background-color: #a0c8ff;
  min-height: 50px;
}

#item3 {
  background-color: #ffa08c;
  min-height: 40px;
}

#item4 {
  background-color: #ffff8c;
  min-height: 60px;
}

#item5 {
  background-color: #ff8cff;
  min-height: 70px;
}

#item6 {
  background-color: #8cffff;
  min-height: 50px;
  font-size: 30px;
}

select {
  font-size: 16px;
}

.row {
  margin-top: 10px;
}

div > div {
  box-sizing: border-box;
  border: 2px solid white;
  width: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}

HTML

我們包含一個容器 <div>，內有六個巢狀的 <div> 子元素。為了簡潔起見，表單的 HTML 和更改容器類的 JavaScript 已被隱藏。

html

<div id="container" class="flex">
  <div id="item1">1</div>
  <div id="item2">2</div>
  <div id="item3">3</div>
  <div id="item4">4<br />line 2</div>
  <div id="item5">5</div>
  <div id="item6">6</div>
</div>

<div class="row">
  <label for="display">display: </label>
  <select id="display">
    <option value="flex">flex</option>
    <option value="grid">grid</option>
  </select>
</div>

<div class="row">
  <label for="values">align-items: </label>
  <select id="values">
    <option value="normal">normal</option>
    <option value="flex-start">flex-start</option>
    <option value="flex-end">flex-end</option>
    <option value="center" selected>center</option>
    <option value="baseline">baseline</option>
    <option value="stretch">stretch</option>

    <option value="start">start</option>
    <option value="end">end</option>
    <option value="self-start">self-start</option>
    <option value="self-end">self-end</option>

    <option value="first baseline">first baseline</option>
    <option value="last baseline">last baseline</option>

    <option value="safe center">safe center</option>
    <option value="unsafe center">unsafe center</option>
    <option value="safe right">safe right</option>
    <option value="unsafe right">unsafe right</option>
    <option value="safe end">safe end</option>
    <option value="unsafe end">unsafe end</option>
    <option value="safe self-end">safe self-end</option>
    <option value="unsafe self-end">unsafe self-end</option>
    <option value="safe flex-end">safe flex-end</option>
    <option value="unsafe flex-end">unsafe flex-end</option>
  </select>
</div>

const values = document.getElementById("values");
const display = document.getElementById("display");
const container = document.getElementById("container");

values.addEventListener("change", (evt) => {
  container.style.alignItems = evt.target.value;
});

display.addEventListener("change", (evt) => {
  container.className = evt.target.value;
});

結果

規範

規範
CSS Box Alignment Module Level 3 # align-items-property
CSS 彈性盒子佈局模組第 1 級 # align-items-property

瀏覽器相容性

另見

幫助改進 MDN

瞭解如何貢獻

此頁面最後修改於 ⁨2025 年 8 月 22 日⁩，由 MDN 貢獻者們共同完成。

在 GitHub 上檢視此頁面 • 報告此內容的問題