ウェブサイトでコンテンツを横並びにする際「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作成のときなんかもめっちゃ使えます）
そういったときに、是非コピペで利用してみてください。
対応ブラウザが沢山になりメインどころはカバーできていると思うのですが、古いバージョンのものや珍しいブラウザ等は確認しないとわからないので、気になるブラウザがありましたら是非試してみてください。
