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

ウェブサイトでコンテンツを横並びにする際「float」を使うことが多かったのですが、最近では「display:flex」を使うことが多くなりました。

画像を3つ並びにするときとか、ECサイト運営をしていると確実に商品画像を並べたいときがきます。

そんなとき、このコードさえ仕込んでおけばもう安心です！

「display:flex」を使って商品画像を綺麗に並べたり、コンテンツを横並びにできる方法を、コピペで使えるソースコード付きでご紹介します。

この記事の著者

ガジェットブロガー

R.U.I ルイ

詳しいプロフィール

プロフィール

ガジェットやモノで生活に刺激を「ルイログ」。当サイトではAppleデバイスやその周辺機器、使えるソフト・アプリ、さまざまなガジェットや生活家電・モノをレビューしています。他にもWEBをデザインのコピペで簡単に使えるコードを紹介したりも。WEBエンジニアの方やPCが趣味・PCを使って仕事をしている方にとって役立つ情報を発信しています。カメラ・写真が好きなのでレビュー商品も写真を多め撮影し掲載することでより商品の魅力や細かいが伝わるよう心がけています。 プロフィール詳細やレビューガイドライン

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デザインをっ！