align-self
Baseline 廣泛可用 *
align-self 這個 CSS 屬性會覆蓋網格或伸縮盒子項的 align-items 值。在網格佈局中，它用來在網格區域內對齊專案。在伸縮盒子佈局中，它用來在交叉軸上對齊專案。
試一試
align-self: stretch;
align-self: center;
align-self: start;
align-self: end;
<section class="default-example" id="default-example">
<div class="example-container">
<div class="transition-all" id="example-element">One</div>
<div>Two</div>
<div>Three</div>
</div>
</section>
.example-container {
border: 1px solid #c5c5c5;
display: grid;
width: 200px;
grid-template-columns: 1fr 1fr;
grid-auto-rows: 80px;
grid-gap: 10px;
}
.example-container > div {
background-color: rgb(0 0 255 / 0.2);
border: 3px solid blue;
}
此屬性不適用於塊級盒子和表格單元格。如果一個伸縮盒子項的交叉軸外邊距為 auto，則 align-self 會被忽略。
語法
/* Keyword values */
align-self: auto;
align-self: normal;
/* Positional alignment */
/* align-self does not take left and right values */
align-self: center; /* Put the item around the center */
align-self: start; /* Put the item at the start */
align-self: end; /* Put the item at the end */
align-self: self-start; /* Align the item flush at the start */
align-self: self-end; /* Align the item flush at the end */
align-self: flex-start; /* Put the flex item at the start */
align-self: flex-end; /* Put the flex item at the end */
align-self: anchor-center;
/* Baseline alignment */
align-self: baseline;
align-self: first baseline;
align-self: last baseline;
align-self: stretch; /* Stretch 'auto'-sized items to fit the container */
/* Overflow alignment */
align-self: safe center;
align-self: unsafe center;
/* Global values */
align-self: inherit;
align-self: initial;
align-self: revert;
align-self: revert-layer;
align-self: unset;
值
auto-
計算值為父元素的
align-items值。 normal-
此關鍵字的效果取決於我們所處的佈局模式
- 在絕對定位佈局中，該關鍵字在可替換的絕對定位盒子上表現得像
start，而在所有其他絕對定位盒子上表現得像stretch。 - 在絕對定位佈局的靜態位置上，該關鍵字的表現行為類似於
stretch。 - 對於彈性盒子元素，該關鍵字的表現行為類似於
stretch。 - 對於網格專案，這個關鍵字產生的行為類似於
stretch，但對於具有寬高比或固有尺寸的盒子，它的行為類似於start。 - 該屬性不適用於塊級盒子和表格單元格。
- 在絕對定位佈局中，該關鍵字在可替換的絕對定位盒子上表現得像
self-start-
使專案與對齊容器的邊緣對齊，該邊緣對應於專案在交叉軸上的起始側。
self-end-
使專案與對齊容器的邊緣對齊，該邊緣對應於專案在交叉軸上的結束側。
flex-start-
伸縮專案的交叉軸起始外邊距邊緣與該行的交叉軸起始邊緣對齊。
flex-end-
伸縮專案的交叉軸結束外邊距邊緣與該行的交叉軸結束邊緣對齊。
center-
伸縮專案的外邊距盒子在其所在行的交叉軸上居中。如果專案的交叉軸尺寸大於伸縮容器，它將在兩個方向上平均溢位。
baseline、first baseline、last baseline-
指定參與第一條或最後一條基線對齊：將盒的第一條或最後一條基線集的對齊基線，與基線共享組中所有盒的共享第一條或最後一條基線集中的相應基線對齊。
first baseline的回退對齊方式是start，last baseline的是end。 stretch-
如果專案的交叉軸尺寸是
auto，則其使用的尺寸被設定為儘可能接近填滿容器所需的長度，同時尊重專案的寬度和高度限制。如果專案不是自動調整尺寸的，此值將回退到flex-start，如果容器的align-content是first baseline（或baseline）或last baseline，則回退到self-start或self-end。 anchor-center-
對於錨點定位的元素，此值將專案在塊方向上與關聯的錨點元素中心對齊。參見使用
anchor-center在錨點上居中。 safe-
如果專案的尺寸溢位對齊容器，則該專案將改為按對齊模式為
start的方式對齊。 unsafe-
無論專案和對齊容器的相對尺寸如何，給定的對齊值都會被遵守。
正式定義
| 初始值 | auto |
|---|---|
| 應用於 | 伸縮專案、網格專案和絕對定位的盒子 |
| 繼承性 | 否 |
| 計算值 | 對於絕對定位的元素，auto 計算為自身；對於所有其他盒子，計算為父元素上 align-items 的計算值（減去任何舊版關鍵字）；如果盒子沒有父元素，則為 start。其行為取決於佈局模型，如 justify-self 所述。否則為指定值。 |
| 動畫型別 | 離散 |
正式語法
align-self =
auto |
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
示例
HTML
<section>
<div>Item #1</div>
<div>Item #2</div>
<div>Item #3</div>
</section>
CSS
section {
display: flex;
align-items: center;
height: 120px;
background: beige;
}
div {
height: 60px;
background: cyan;
margin: 5px;
}
div:nth-child(3) {
align-self: flex-end;
background: pink;
}
結果
規範
| 規範 |
|---|
| CSS Box Alignment Module Level 3 # align-self 屬性 |
| CSS 彈性盒子佈局模組第 1 級 # align-items 屬性 |
瀏覽器相容性
載入中…