忘備録～「UL」or 「OL」編 – display:flex – ～
2022年12月22日
今日から1年の最後の月！
1ヶ月の半分が過ぎていきましたね！
でも、日本のCOVID-19の終息はなかなか見えてこないんですね…
マスク生活はいつまで続くねん？
そろそろマスク生活から脱却したいのに！
世界のみんなを見たらほとんどマスクしてない人多いわ！
日本だけマスク生活をつつけてたら余計にしんどくならへん？
そろそろ、政府の役員たち、そろそろマスクなしの生活しても大丈夫ですって発令してほしいものです！
さてと、本題に入ろう！
忘備録～「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>
</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;
}
実行結果
「display:flex;」についての解説はこれにて完了！
2016年から使い始めてたんですね。
こっちが知ったのは2020年以降ぐらいでした。
CSS3の情報のネタが欲しいぐらいネットで調べてもキリがないのかな？
では、また！
- Leonardo
- 今日は愛車の点検！ 2024年12月22日
- マーケティングについて考えること 2024年12月21日
- 冬になると手がカサカサになる… 2024年12月20日
- 転職したほうがいい？～Part.2～ 2024年12月19日
- 転職したほうがいい？ 2024年12月18日