CSS align-items 屬性
更多“自己嘗試”的例子見下文。
定義和用法
align-items 屬性指定了 flexbox 或 grid 容器內專案的預設對齊方式。
- 在 flexbox 容器中，flex items 沿交叉軸對齊，交叉軸預設是垂直的（與 flex-direction 相反）。
- 在 grid 容器中，grid items 沿塊方向對齊。對於英文頁面，塊方向是向下，內聯方向是左到右。
要使此屬性產生任何對齊效果，專案需要在適當方向上有可用的空間。
提示：使用每個專案的 align-self 屬性來覆蓋 align-items 屬性。
瀏覽器支援
表中的數字指定了完全支援該屬性的第一個瀏覽器版本。
| 屬性 | |||||
|---|---|---|---|---|---|
| align-items | 57.0 | 16.0 | 52.0 | 10.1 | 44.0 |
CSS 語法
align-items: normal|stretch|positional alignment|flex-start|flex-end|baseline|initial|inherit;
屬性值
| 值 | 描述 | 試一試 |
|---|---|---|
| normal | 預設值。對於 flexbox 和 grid 專案，其行為類似於 'stretch'；對於具有已定義塊尺寸的 grid 專案，其行為類似於 'start'。 | 演示 ❯ |
| stretch | 專案被拉伸以適應容器 | 演示 ❯ |
| center | 項位於容器的中心 | 演示 ❯ |
| flex-start | 項位於容器的起始位置 | 演示 ❯ |
| flex-end | 項位於容器的末尾位置 | 演示 ❯ |
| start | 專案在各自的 grid 單元塊的起始位置對齊 | |
| end | 專案在各自的 grid 單元塊的結束位置對齊 | |
| baseline（基線） | 專案根據容器的基線位置對齊 | 演示 ❯ |
| initial | 將此屬性設定為其預設值。閱讀關於initial | |
| inherit | 從其父元素繼承此屬性。閱讀關於inherit |
更多示例
絕對定位示例
對於絕對定位的 grid 專案，專案在每個 grid 單元塊的結束位置對齊
#container {
display: grid;
position: relative;
align-items: end;
}
#container > div {
position: absolute;
}
自己動手試一試 »
相關頁面
CSS 教程： CSS Grid
CSS 教程：CSS Flexbox
CSS 參考：align-content 屬性
CSS 參考：align-self 屬性
CSS 參考：justify-content 屬性
CSS 參考：justify-items 屬性
CSS 參考： justify-self 屬性
HTML DOM 參考：alignItems 屬性
