place-self
Baseline 廣泛可用 *
place-self CSS 簡寫屬性允許您同時在塊級和行內方向上對單個專案進行對齊（即 align-self 和 justify-self 屬性）。此屬性適用於塊級盒、絕對定位盒和網格專案。如果第二個值不存在，則第一個值也用於第二個值。
試一試
place-self: stretch center;
place-self: center start;
place-self: start end;
place-self: end center;
<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: 220px;
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;
}
構成屬性
此屬性是以下 CSS 屬性的簡寫：
語法
/* Positional alignment */
place-self: auto center;
place-self: normal start;
place-self: center normal;
place-self: start auto;
place-self: end normal;
place-self: self-start auto;
place-self: self-end normal;
place-self: flex-start auto;
place-self: flex-end normal;
place-self: anchor-center;
/* Baseline alignment */
place-self: baseline normal;
place-self: first baseline auto;
place-self: last baseline normal;
place-self: stretch auto;
/* Global values */
place-self: inherit;
place-self: initial;
place-self: revert;
place-self: revert-layer;
place-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大小的，則其尺寸會等量增加（而不是按比例），同時仍遵守max-height/max-width（或等效功能）施加的約束，以便所有auto大小專案的總尺寸沿交叉軸精確填充對齊容器。 anchor-center-
對於錨點定位元素，將專案在塊級和行內方向上與關聯錨點元素的中心對齊。請參閱使用
anchor-center在錨點上居中。
正式定義
| 初始值 | 作為簡寫中的每個屬性
|
|---|---|
| 應用於 | 塊級盒、絕對定位盒和網格專案 |
| 繼承性 | 否 |
| 計算值 | 作為簡寫中的每個屬性
|
| 動畫型別 | 離散 |
正式語法
place-self =
<'align-self'> <'justify-self'>?
<align-self> =
auto |
normal |
stretch |
<baseline-position> |
<overflow-position>? <self-position> |
anchor-center |
dialog
<justify-self> =
auto |
normal |
stretch |
<baseline-position> |
<overflow-position>? [ <self-position> | left | right ] |
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
示例
基本演示
在下面的示例中，我們有一個 2x2 的網格佈局。最初，網格容器的 justify-items 和 align-items 值為 stretch（預設值），這導致網格專案拉伸以佔據其單元格的整個寬度。
然後，第二個、第三個和第四個網格項被賦予不同的 place-self 值，以展示它們如何覆蓋預設放置。這些值使網格項只與其內容寬度/高度一樣寬/高，並在其單元格的塊級和行內方向上對齊在不同的位置。
HTML
<article class="container">
<span>First</span>
<span>Second</span>
<span>Third</span>
<span>Fourth</span>
</article>
CSS
html {
font-family: "Helvetica", "Arial", sans-serif;
letter-spacing: 1px;
}
article {
background-color: red;
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-rows: 80px;
grid-gap: 10px;
margin: 20px;
width: 300px;
}
span:nth-child(2) {
place-self: start center;
}
span:nth-child(3) {
place-self: center start;
}
span:nth-child(4) {
place-self: end;
}
article span {
background-color: black;
color: white;
margin: 1px;
text-align: center;
}
article,
span {
padding: 10px;
border-radius: 7px;
}
結果
規範
| 規範 |
|---|
| CSS Box Alignment Module Level 3 # place-self-屬性 |
瀏覽器相容性
載入中…