アイテムの自己整列： 略式プロパテ。
| 名前 | place-self
|
|---|---|
| 値 | <'align-self'> <'justify-self'>? |
| 初期値 | auto |
| 適用対象 | ブロック レベルのボックス、絶対的に位置されたボックス、格子アイテム |
| 継承 | されない |
| 百分率 | 受容しない |
| 算出値 | 個々のプロパティを見よ |
| 正準的順序 | 文法に従う |
| アニメーション型 | 離散的 |
この略式プロパティは、align-self、justify-self 両プロパティを単独の宣言で設定する。値が 1 個だけ与えられた場合は、その値が両プロパティにあてがわれ、2 個与えられた場合は、2 個目の値が後者のプロパティにあてがわれる。
<DIV style="border:1px solid black; width:200px; height:100px; "> <SPAN style="border:1px solid black;">１</SPAN> <SPAN style="place-self:end; border:1px solid red;">２</SPAN> <SPAN style="border:1px solid black;">３</SPAN> <SPAN style="border:1px solid black;">４</SPAN> </DIV>¶
<DIV style="display:grid; border:1px solid black; grid-template:50px 70px/50px 70px 100px; align-items:center; "> <DIV style="border:1px solid black;">１</DIV> <DIV style="place-self:start; border:1px solid red;">２</DIV> <DIV style="border:1px solid black;">３</DIV> <DIV style="border:1px solid black;">４</DIV> </DIV>
<DIV style="display:flex; border:1px solid black; width:200px; height:100px; align-items:center; "> <DIV style="border:1px solid black;">１</DIV> <DIV style="place-self:start; border:1px solid red;">２</DIV> <DIV style="border:1px solid black;">３</DIV> <DIV style="border:1px solid black;">４</DIV> </DIV>
align-self、justify-self。place-content、place-items。
| 表示内容： |
| 表示内容： |