実際によく使うcssのflexbox横並びレイアウト(2カラム,3カラム,4カラム編)

16,315view

実際によく使うcssのflexbox横並びレイアウト(2カラム,3カラム,4カラム編)

最近cssのflotを使うことがめっきり無くなりました。というのもflexboxが便利すぎて毎日と言っていいほど使っています。今回は実際よく使うflexの横並びレイアウト(2カラム,3カラム,4カラム編)をご紹介します。

CONTENTS

flexbox横並びレイアウト(2カラム)の場合

2カラムレイアウトはサイトに必ず言っていいほど出番が多いですよね。
Flexを使えば下記のようによくある左に画像、右にテキストみたいなレイアウトが簡単にできます。

HTML
<div class="item">
  <div class="img"></div>
  <p class="txt">この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</p>
</div>
CSS
.item{
	display: flex;
	justify-content: space-between;
}
.item .img{
	width: 35%;
	background: #3D9FB1;
}
.item .txt{
	width: 62%;
}

See the Pen flex1 by kiyoaki watanabe (@watakiyo) on CodePen.dark

justify-content: space-betweenは親要素の横幅に応じて子要素を均等に配置してくれるので、マージンの計算もする必要がなくとても便利です。

ちなみに画像のサイズをパーセントにしたくない場合はピクセルでも指定できます。

CSS
.item{
	display: flex;
	justify-content: space-between;
	.img{
		width: 280px;
		background: #3D9FB1;
	}
	.txt{
		width: calc(100% - 310px);//画像とテキストの間を30px取った場合 280px(画像)+30px(間)=310px
	}
}

その場合cssのcalcが便利です。
100%からpxでもremでも引いて計算してくれます。詳しくはこちら

flexbox横並びレイアウト(3カラム)の場合

3カラムで横並びにしたい場合下記のように記述します。

HTML
<div class="items">
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
</div>
CSS
.items{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.item{
	width: 32%;
	height: 100px;
	background: #3D9FB1;
}

See the Pen flex3カラム by kiyoaki watanabe (@watakiyo) on CodePen.dark

flexbox横並びレイアウト(4カラム)の場合

4カラムで横並びにしたい場合下記のように記述します。

HTML
<div class="items">
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
</div>
CSS
.items{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.item{
	width: 23%;
	height: 100px;
	background: #3D9FB1;
}

See the Pen flex4カラム by kiyoaki watanabe (@watakiyo) on CodePen.dark

3カラム,4カラムの場合、複数行になると崩れる?

ここで注意して欲しい点があります。3カラム,4カラムの場合、複数行になると下記のようなレイアウトになってしまいます。

3カラムの場合(複数行)

4カラムの場合(複数行)

これだと求めていた形ではありませんよね…最後の列は左詰にしたいですよね…
justify-content: space-betweenを使っているので、横の位置を均等に配置してるためこうなります。
しかし安心してください。下記のようにCSSでflexを指定した要素に疑似要素にスタイルを追加すると左詰めにできます。

左詰め! flexbox横並びレイアウト(3カラム)の場合

3カラムの場合flexを指定した要素にafterの疑似要素を追加すると左詰めにできます。

HTML
<div class="items">
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
</div>
CSS
.items{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.items:after{
	content:"";
	display:block;
	width: 32%;
	height:0;
}
.item{
	width: 32%;
	height: 100px;
	background: #3D9FB1;
	margin-bottom: 10px;
}

See the Pen JjYBKMP by kiyoaki watanabe (@watakiyo) on CodePen.dark

左詰めにできましたね!ちなみにflex-wrap: wrapは枠に収まらないときに複数行に折り返すという指定です。

左詰め! flexbox横並びレイアウト(4カラム)の場合

4カラムの場合flexを指定した要素にafterとbeforeの疑似要素を追加すると左詰めにできます。beforeの疑似要素にだけorder:1をつけるのがポイントです。

HTML
<div class="items">
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
</div>
CSS
.items{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.items:after,
.items:before{
	content:"";
	display:block;
	width: 23%;
	height:0;
}
.items:before{
	order:1;
}
.item{
	width: 23%;
	height: 100px;
	background: #3D9FB1;
	margin-bottom: 10px;
}

See the Pen 左詰め flexbox4カラム by kiyoaki watanabe (@watakiyo) on CodePen.dark

4カラムの場合もできましたね!4カラム以上になるとこの方法は使えませんが、最近のWebサイトのレイアウトでいうとスマホも考慮して1〜2カラムが主流ですので4カラム以上の場合はギャラリーサイトとかではない限りあまり使わないのでこのflexレイアウトで2〜4ができれば十分かと個人的には思っています。

まとめ

flexboxの横並びレイアウトに出会ってからは便利すぎてCSSのレイアウトが一気に楽になりました。
これからスタンダードになっていくであろうflexbox、この機会に是非flexboxを使いこなしていきましょう。
他にもflexboxについてはまだまだ色々便利な使い方があるので随時ご紹介していきます。

この記事をシェアする