【コピペで簡単】floatを使わずにdisplay:flexで横並びのコンテンツをつくる方法

ウェブサイトでコンテンツを横並びにする際「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デザインをっ！