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

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

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

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

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

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

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

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

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

さてと、本題に入ろう！

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

CSS3の時代になりつつ、CSSの種類が増えてきてます。

「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>
	<li><img src="./img/photo04.jpg" alt="Photo04" width="100%" /></li>
	<li><img src="./img/photo05.jpg" alt="Photo05" width="100%" /></li>
</ul>

.photo{
	display:flex;
	display:-webkit-flex;
	margin:0 auto;
	padding:0;
}
.photo li{
	list-style-type:none;
	margin:0 20px;
	padding:0;
}

実行結果（イメージ）

・横幅を設定して改行をさせたいとき

.photo{
	display:flex;
	display:-webkit-flex;
	flex-wrap:wrap;/* 改行させるとき */
	margin:0 auto;
	padding:0;
	width:1020px;/* 改行をさせる幅を設定するとき */
}
.photo li{
	list-style-type:none;
	margin:0 20px;
	padding:0;
}

実行結果

・横幅を設定して逆順をさせたいとき

.photo{
	display:flex;
	display:-webkit-flex;
	flex-wrap:wrap-reverse;/* 逆順をさせるとき */
	margin:0 auto;
	padding:0;
	width:1020px;/* 改行をさせる幅を設定するとき */
}
.photo li{
	list-style-type:none;
	margin:0 20px;
	padding:0;
}

実行結果