CSS3

：

プロパティ

：

place-content

　 編集：2022.07.17 by T.A.

→●、mdn

コンテナ内容配置分布： 略式プロパティ。

名前 place-content
値 <'align-content'> <'justify-content'>?
初期値 normal
適用対象 ブロック コンテナ、flex コンテナ、格子コンテナ
継承 されない
百分率 受容しない
算出値 個々のプロパティを見よ
正準的順序 文法に従う
アニメーション型 離散的

この略式プロパティは、align-content、justify-content 両プロパティを単独の宣言で設定する。2 個の値は、順に前者、後者のプロパティにあてがわれる。2 個目の値が省略された場合、後者のプロパティには［1 個目の値が <baseline-position> ならば start／他の場合は 1 個目の値］があてがわれる。 

<DIV style="border:1px solid red;
 width:200px; height:100px;
 place-content:end left;
">
 <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:flex; border:1px solid red;
 flex-wrap:wrap;
 width:200px; height:150px;
 place-content:space-between space-around;
">
 <DIV style="flex-basis:50px; border:1px solid black;">１</DIV>
 <DIV style="flex-basis:50px; border:1px solid black;">２</DIV>
 <DIV style="flex-basis:50px; border:1px solid black;">３</DIV>
 <DIV style="flex-basis:50px; border:1px solid black;">４</DIV>
</DIV>

テスト
HTML：

ここに表示
HTML：

ここに表示
スクリプト：


スクリプト：



表示内容：
表示内容：