忘備録～「UL」or 「OL」編 – display:flex – ～

今日から1年の最後の月！

1ヶ月の半分が過ぎていきましたね！

でも、日本のCOVID-19の終息はなかなか見えてこないんですね…

マスク生活はいつまで続くねん？

そろそろマスク生活から脱却したいのに！

世界のみんなを見たらほとんどマスクしてない人多いわ！

日本だけマスク生活をつつけてたら余計にしんどくならへん？

そろそろ、政府の役員たち、そろそろマスクなしの生活しても大丈夫ですって発令してほしいものです！

さてと、本題に入ろう！

忘備録～「UL」or 「OL」編 – display:flex – ～

今回はフレックスボックスを使った均等配置の使い方を説明しますね。

ほとんどのブラウザでは使えるようになっていますが…

対応していないバージョンもありますので、ベンダープレフィックス（-webkit-）を合わせて付けといたほうが無難かなと思います。

各ブラウザが対応しているサポートサイトがありますので、それを見て参考にしてみてください。

flexのサポート状況 -Can I Use

<ul class="photo">
	<li><img src="./img/photo01.jpg" alt="Photo01" width="100%" /></li>
	<li><img src="./img/photo02.jpg" alt="Photo02" width="100%" /></li>
	<li><img src="./img/photo03.jpg" alt="Photo03" width="100%" /></li>
</ul>

.photo{
	display:flex;
	display:-webkit-flex;
	margin:0 auto;
	padding:0;
	justify-content:space-between;/* 均等配置のプロパティ */
	-webkit-justify-content:space-between;/* 均等配置のプロパティ */
}
.photo li{
	list-style-type:none;
	margin:0 auto;
	padding:0;
}

実行結果（イメージ）

・並列で均等配置（左右隙間あり）

.photo{
	display:flex;
	display:-webkit-flex;
	margin:0 auto;
	padding:0;
	-webkit-justify-content:space-around;/* 均等配置のプロパティ（左右隙間ありの場合） */
	justify-content:space-around;/* 均等配置のプロパティ（左右隙間ありの場合） */
}
.photo li{
	list-style-type:none;
	margin:0 20px;
	padding:0;
}

実行結果