忘備録～「UL」or 「OL」編 – display:flex – ～
2022年12月21日
今日から1年の最後の月！
1ヶ月の半分が過ぎていきましたね！
でも、日本のCOVID-19の終息はなかなか見えてこないんですね…
マスク生活はいつまで続くねん？
そろそろマスク生活から脱却したいのに！
世界のみんなを見たらほとんどマスクしてない人多いわ！
日本だけマスク生活をつつけてたら余計にしんどくならへん？
そろそろ、政府の役員たち、そろそろマスクなしの生活しても大丈夫ですって発令してほしいものです！
さてと、本題に入ろう！
忘備録～「UL」or 「OL」編 – display:flex – ～
CSS3の時代になりつつ、CSSの種類が増えてきてます。
「UL」or「OL」を使う時に、「display:flex」がたまにあちこちで見られるようになりました。
フレックスボックスの使い方を説明しますね。
ほとんどのブラウザでは使えるようになっていますが…
対応していないバージョンもありますので、ベンダープレフィックス（-webkit-）を合わせて付けといたほうが無難かなと思います。
各ブラウザが対応しているサポートサイトがありますので、それを見て参考にしてみてください。
<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;
}
実行結果
次は中央揃えの方法もあるので今日はここまで！
では、また！
- Leonardo
- 今日は愛車の点検！ 2024年12月22日
- マーケティングについて考えること 2024年12月21日
- 冬になると手がカサカサになる… 2024年12月20日
- 転職したほうがいい？～Part.2～ 2024年12月19日
- 転職したほうがいい？ 2024年12月18日