CSS align-self 屬性
更多“自己嘗試”的例子見下文。
定義和用法
align-self 屬性用於指定 Flexbox 或 Grid 容器中選定項在塊方向上的對齊方式。
對於英文頁面，塊方向向下，行內方向從左到右。
提示：要在行內方向而不是塊方向上對齊 Grid 項，請使用 justify-self 或 justify-items 屬性。
注意：align-self 屬性會覆蓋 Grid 或 Flex 容器的 align-items 屬性。
瀏覽器支援
表中的數字指定了完全支援該屬性的第一個瀏覽器版本。
| 屬性 | |||||
|---|---|---|---|---|---|
| align-self | 57.0 | 16.0 | 52.0 | 10.1 | 44.0 |
CSS 語法
align-self: auto|stretch|center|flex-start|flex-end|baseline|initial|inherit;
屬性值
| 值 | 描述 | 試一試 |
|---|---|---|
| auto | 預設值。元素繼承其父容器的 align-items 屬性，如果它沒有父容器，則為 "stretch"。 | 演示 ❯ |
| stretch | 元素被定位以適應容器 | 演示 ❯ |
| center | 元素在容器中居中對齊 | 演示 ❯ |
| flex-start | 元素在容器的開頭處對齊 | 演示 ❯ |
| flex-end | 元素在容器的末尾處對齊 | 演示 ❯ |
| baseline（基線） | 元素在容器的基線上對齊 | 演示 ❯ |
| initial | 將此屬性設定為其預設值。閱讀關於initial | |
| inherit | 從其父元素繼承此屬性。閱讀關於inherit |
更多示例
Grid 佈局中的 align-self
使用 align-self 屬性，在塊方向上將單個 Grid 項的對齊方式設定為結束位置
#container {
display: grid;
}
#myDiv {
align-self: end;
}
自己動手試一試 »
相關頁面
CSS 教程：CSS Grid
CSS 教程：CSS Flexbox
CSS 參考：align-content 屬性
CSS 參考： align-items 屬性
CSS 參考： justify-self 屬性
HTML DOM 參考：alignSelf 屬性
