place-contentプロパティは、コンテナ内全体の交差軸方向(初期値では縦方向)と主軸方向(初期値では横方向)の揃え位置をまとめて指定する際に使用します。
place-contentプロパティの宣言1つで、 align-contentプロパティの値と justify-contentプロパティ値を指定できます。
place-contentプロパティの値は、半角スペース区切りで2つ指定することができます。 1番目はalign-contentプロパティの値、2番目はjustify-contentプロパティの値となります。 2番目の値を省略すると、1番目と同じになります。
尚、コンテナ内のアイテムの主軸方向や交差軸方向が横になるか縦になるかは、 flex-directionプロパティの値によって変化します。 詳しくは、「フレックスコンテナの主軸方向と交差軸方向」を参考にしてください。
ul.sample_menu { display:-webkit-flex; display:flex; flex-wrap:wrap; width:320px; height:160px; background-color:#ffeeaa; list-style-type:none; margin:0; padding:0; } ul.sample_menu a { display:block; margin:2px; padding:10px; font-size:10px; background-color:#66cc99; color:#ffffff; text-align:center; text-decoration:none; }
<h5>place-content:flex-start flex-end; を指定</h5> <ul class="sample_menu" style="place-content:flex-start flex-end;"> <li><a href="#">メニュー1</a></li> <li><a href="#">メニュー2</a></li> <li><a href="#">メニュー3</a></li> <li><a href="#">メニュー4</a></li> <li><a href="#">メニュー5</a></li> <li><a href="#">メニュー6</a></li> </ul> <h5>place-content:flex-start flex-end; を指定</h5> <ul class="sample_menu" style="place-content:flex-start flex-end;"> <li><a href="#">メニュー1</a></li> <li><a href="#">メニュー2</a></li> <li><a href="#">メニュー3</a></li> <li><a href="#">メニュー4</a></li> <li><a href="#">メニュー5</a></li> <li><a href="#">メニュー6</a></li> </ul> <h5>place-content:flex-start center; を指定</h5> <ul class="sample_menu" style="place-content:flex-start center;"> <li><a href="#">メニュー1</a></li> <li><a href="#">メニュー2</a></li> <li><a href="#">メニュー3</a></li> <li><a href="#">メニュー4</a></li> <li><a href="#">メニュー5</a></li> <li><a href="#">メニュー6</a></li> </ul> <h5>place-content:flex-start space-between; を指定</h5> <ul class="sample_menu" style="place-content:flex-start space-between;"> <li><a href="#">メニュー1</a></li> <li><a href="#">メニュー2</a></li> <li><a href="#">メニュー3</a></li> <li><a href="#">メニュー4</a></li> <li><a href="#">メニュー5</a></li> <li><a href="#">メニュー6</a></li> </ul> <h5>place-content:flex-start space-around; を指定</h5> <ul class="sample_menu" style="place-content:flex-start space-around;"> <li><a href="#">メニュー1</a></li> <li><a href="#">メニュー2</a></li> <li><a href="#">メニュー3</a></li> <li><a href="#">メニュー4</a></li> <li><a href="#">メニュー5</a></li> <li><a href="#">メニュー6</a></li> </ul> <h5>place-content:flex-start stretch; を指定</h5> <ul class="sample_menu" style="place-content:flex-start stretch;"> <li><a href="#">メニュー1</a></li> <li><a href="#">メニュー2</a></li> <li><a href="#">メニュー3</a></li> <li><a href="#">メニュー4</a></li> <li><a href="#">メニュー5</a></li> <li><a href="#">メニュー6</a></li> </ul>