ウェブサイトでコンテンツを横並びにする際「float」を使うことが多かったのですが、最近では「display:flex」を使うことが多くなりました。
画像を3つ並びにするときとか、ECサイト運営をしていると確実に商品画像を並べたいときがきます。
そんなとき、このコードさえ仕込んでおけばもう安心です!
「display:flex」を使って商品画像を綺麗に並べたり、コンテンツを横並びにできる方法を、コピペで使えるソースコード付きでご紹介します。
display:flexで等間隔に画像やコンテンツを並べるときの実例
画像やコンテンツが1つのとき、2つのとき、3つのとき・・・から5つのときまで使えるコードを用意しました。
htmlの記述例がこちら
<ul class="list-row3"> <li>左コンテンツ</li> <li>真ん中コンテンツ</li> <li>右コンテンツ</li> </ul>
<ul>にclass指定で3つ並びのclassを呼びます。
そして、その中に<li></li>を3つ用意するだのシンプルなコードです。※横に3つコンテンツを並べるときのバージョン
3つ並びを2行(全部で6個)並べたいときは、そのまま<li>を3つつければOK。シンプルイズベスト!
メインとなるCSS
CSSがこちら。
ul.list-row1, ul.list-row2, ul.list-row3, ul.list-row4, ul.list-row5 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; /*↓ここはお好みで↓*/ list-style:none; padding:0; margin:0 auto; /*↑ここはお好みで↑*/ } ul.list-row1 li { width: 100%; text-align: center; } ul.list-row2 li { width: 50%; text-align: center; } ul.list-row3 li { width: 33.3%; text-align: center; } ul.list-row4 li { width: 25%; text-align: center; } ul.list-row5 li { width: 20%; text-align: center; } *, *::before, *::after { -webkit-box-sizing: border-box; box-sizing: border-box; }
5種類分を書いているので少々長いですが、仕込みとしてはこんなもん!
各コードはいたってシンプル。
display: -◯◯; 等の「-」がついている系のコードは、古いブラウザに対応するためのコードなので将来的にはいらなくなるでしょう。
1〜5個並びの各%指定は、指定のwidth%×個数=100%になるようになっています。
なので、それだけだとピッタリとコンテンツが並ぶ感じ。
でも大体少しはスペースを用意したりするので、box-sizing: border-box; を仕込みます。
box-sizing: border-box; を仕込むことで、padding等でスペースを入れた場合も100%を超えずにスペースを作ることができます。
超便利!!
スペースを付ける場合は、こちらのCSSも仕込んでおきましょう。
ul.list-row1.gutter li, ul.list-row2.gutter li, ul.list-row3.gutter li, ul.list-row4.gutter li, ul.list-row5.gutter li{ padding:.5%; }
そしてHTMLコードでclass指定を1つ増やしてあげましょう。
<ul class="list-row3 gutter">
このようにgutter(ガター・溝という意味で使いました)も指定してあげると、paddingで0.5%の隙間をあけることができます。(隙間は好みで調節してくださいね)
まとめ
私が普段、ECサイト構築をする際に多様しているコードを紹介しました。
ECサイト運営をしていると、商品画像を横並びにしたいときが必ずきます。(普段のトップページやカテゴリページ上部、楽天スーパーセール時のLP作成のときなんかもめっちゃ使えます)
そういったときに、是非コピペで利用してみてください。
対応ブラウザが沢山になりメインどころはカバーできていると思うのですが、古いバージョンのものや珍しいブラウザ等は確認しないとわからないので、気になるブラウザがありましたら是非試してみてください。
良きWEBデザインをっ!