↑

CSS3

：

プロパティ

：

place-items

　 編集：2022.07.17 by T.A.

→●、mdn

コンテナ内の整列など： 略式プロパティ。

名前 place-items
値 <'align-items'> <'justify-items'>?
初期値 個々のプロパティを見よ
適用対象 すべての要素
継承 されない
百分率 受容しない
算出値 個々のプロパティを見よ
正準的順序 文法に従う
アニメーション型 離散的

この略式プロパティは、align-items、justify-items 両プロパティを単独の宣言で設定する。値が 1 個だけ与えられた場合は、その値が両プロパティにあてがわれ、2 個与えられた場合は、2 個目の値が後者のプロパティにあてがわれる。 

<DIV style="border:1px solid red;
 width:200px; height:100px;
 place-items:end center;
">
 <SPAN style="border:1px solid black;">１</SPAN>
 <SPAN style="border:1px solid black;">２</SPAN>
 <SPAN style="border:1px solid black;">３</SPAN>
 <SPAN style="border:1px solid black;">４</SPAN>
</DIV>
１ ２ ３ ４ 

<DIV style="display:grid; border:1px solid red;
 grid-template:50px 70px/50px 70px 100px;
 place-items:center;
">
 <DIV style="border:1px solid black;">１</DIV>
 <DIV style="border:1px solid black;">２</DIV>
 <DIV style="border:1px solid black;">３</DIV>
 <DIV style="border:1px solid black;">４</DIV>
</DIV>
１
２
３
４

<DIV style="display:grid; border:1px solid red;
 grid-template:50px 70px/50px 70px 100px;
 place-items:start center;
">
 <DIV style="border:1px solid black;">１</DIV>
 <DIV style="border:1px solid black;">２</DIV>
 <DIV style="border:1px solid black;">３</DIV>
 <DIV style="border:1px solid black;">４</DIV>
</DIV>
１
２
３
４

<DIV style="display:flex; border:1px solid red;
 width:200px; height:100px;
 place-items:end center;
">
 <DIV style="border:1px solid black;">１</DIV>
 <DIV style="border:1px solid black;">２</DIV>
 <DIV style="border:1px solid black;">３</DIV>
 <DIV style="border:1px solid black;">４</DIV>
</DIV>
１
２
３
４

テスト
HTML：

ここに表示
HTML：

ここに表示
スクリプト：


スクリプト：



表示内容：
表示内容：