汎用性がとても高い！「flexbox」の使用方法のご紹介

問題

「flexbox」の基本的な使い方がわからない。

解決策

親要素に「display: flex;」を設定することで、子要素に様々な設定を行える。

横並びの新しい手法「flexbox」

要素を横並びにする手法として、「float」「inline-block」が主流でしたが、「flexbox」の普及により、こちらが主流となってきているように思います。
今回は「flexbox」の基本的な使用例をいくつかご紹介します。

※子要素には、以下のCSSを設定しています。

.flexbox-item{
	margin: 0;
	padding: 15px;
	border-right: 1px solid #ffffff;
	border-bottom: 1px solid #ffffff;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
.flex-item:nth-child(odd){
	background-color: #fff2ee;
}
.flex-item:nth-child(even){
	background-color: #FCECE8;
}
.flexbox-item:last-child{
	border-right: none;
}

基本の状態

親要素に「display: flex;」を設定したのみの状態です。

デフォルトで子要素が横並びになります。

DEMOはこちら

テキスト

HTML

<div class="flexbox-sample01">
	<div class="flexbox-item">テキスト</div>
	<div class="flexbox-item">テキスト</div>
	<div class="flexbox-item">テキスト</div>
</div>

CSS

.flexbox-sample01{
	display: -webkit-flex;
	display: flex;
}

両端を除いた余白（スペース）の均等化

親要素に「justify-content: space-between;」を設定することで、両端を除いた均等な余白を空けて子要素が配置されます。

DEMOはこちら

テキスト

HTML

<div class="flexbox-sample02">
	<div class="flexbox-item">テキスト</div>
	<div class="flexbox-item">テキスト</div>
	<div class="flexbox-item">テキスト</div>
</div>

CSS

.flexbox-sample02{
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: space-between;
	justify-content: space-between;
}

両端を含めた余白（スペース）の均等化

親要素に「justify-content: space-around;」を設定することで、両端を含めた均等な余白を空けて子要素が配置されます。

DEMOはこちら

テキスト

HTML

<div class="flexbox-sample03">
	<div class="flexbox-item">テキスト</div>
	<div class="flexbox-item">テキスト</div>
	<div class="flexbox-item">テキスト</div>
</div>

CSS

.flexbox-sample03{
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: space-around;
	justify-content: space-around;
}

子要素の幅の可変 – 隙間が埋まるように幅が伸びてくれます

子要素に「flex-grow: 1;」を設定することで、親要素に隙間のできないように幅が伸びてくれます。

DEMOはこちら

テキスト

HTML

<div class="flexbox-sample04">
	<div class="flexbox-item">テキスト</div>
	<div class="flexbox-item">テキスト</div>
	<div class="flexbox-item">テキスト</div>
</div>

CSS

.flexbox-sample04{
	display: -webkit-flex;
	display: flex;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
}
.flexbox-sample04 .flexbox-item{
    -webkit-flex-grow: 1;
    flex-grow: 1;
}

高さを揃える

親要素に「align-items: stretch;」を設定することで、子要素が高さを揃えてくれます。

DEMOはこちら

テキスト

テキスト
テキスト

テキスト

HTML

<div class="flexbox-sample05">
	<div class="flexbox-item">テキスト</div>
	<div class="flexbox-item">テキスト<br>テキスト</div>
	<div class="flexbox-item">テキスト</div>
</div>

CSS

.flexbox-sample05{
	display: -webkit-flex;
	display: flex;
    -webkit-align-items: stretch;
    align-items: stretch;
}
.flexbox-sample05 .flexbox-item{
    -webkit-flex-grow: 1;
    flex-grow: 1;
}

折り返し＋幅の補完

親要素に「 flex-wrap: wrap; 」を設定することで、子要素が親要素の幅を超える場合、下へ折り返します。これと同時に子要素に「flex-grow: 1;」を設定することで、折り返した要素が幅を補完してくれます。

DEMOはこちら

テキスト

HTML

<div class="flexbox-sample06">
	<div class="flexbox-item">テキスト</div>
	<div class="flexbox-item">テキスト</div>
	<div class="flexbox-item">テキスト</div>
</div>

CSS

.flexbox-sample06{
	display: -webkit-flex;
	display: flex;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}
.flexbox-sample06 .flexbox-item{
    -webkit-flex-grow: 1;
    flex-grow: 1;
    width: 50%;
}

幅の固定＋可変

子要素のいずれに「flex-basis: 幅の数値指定;」を設定することで、その数値に固定されます。
これと同時に他の子要素に「flex-grow: 1;」を設定することで、幅固定と幅可変の2種類の要素を扱うことが可能となります。

DEMOはこちら

テキスト

HTML

<div class="flexbox-sample07">
	<div class="flexbox-item">テキスト</div>
	<div class="flexbox-item">テキスト</div>
	<div class="flexbox-item">テキスト</div>
</div>

CSS

.flexbox-sample07{
	display: -webkit-flex;
	display: flex;
}
.flexbox-sample07 .flexbox-item:first-child {
    -webkit-flex-basis: 50px;
    flex-basis: 50px;
}
.flexbox-sample07 .flexbox-item:not(:first-child){
    -webkit-flex-grow: 1;
    flex-grow: 1;
}

PCとスマートフォンでの使い分け

⑥の手法を利用し、PCでは幅25%で4つ並び、スマートフォンでは幅50%で2つ並びにレイアウトを使い分けることができます。

DEMOはこちら

テキスト

HTML

<div class="flexbox-sample08">
	<div class="flexbox-item">テキスト</div>
	<div class="flexbox-item">テキスト</div>
	<div class="flexbox-item">テキスト</div>
	<div class="flexbox-item">テキスト</div>
	<div class="flexbox-item">テキスト</div>
	<div class="flexbox-item">テキスト</div>
	<div class="flexbox-item">テキスト</div>
	<div class="flexbox-item">テキスト</div>
</div>

CSS

@media print, all and (min-width: 768px) {
	.flexbox-sample08{
		display: -webkit-flex;
		display: flex;
		-webkit-flex-wrap: wrap;
		flex-wrap: wrap;
	}
	.flexbox-sample08 .flexbox-item{
		-webkit-flex-grow: 1;
		flex-grow: 1;
		width: 25%;
	}
}
@media only screen and (max-width: 767px) {
	.flexbox-sample08{
		display: -webkit-flex;
		display: flex;
		-webkit-flex-wrap: wrap;
		flex-wrap: wrap;
	}
	.flexbox-sample08 .flexbox-item{
		-webkit-flex-grow: 1;
		flex-grow: 1;
		width: 50%;
	}
}

参考

【CSSフレックスボックス(display:flex)の使い方 [無料ホームページ作成クラウドサービス　まめわざ]】
https://mamewaza.com/support/blog/howto-use-flex.html

【もう迷わない！CSS Flexboxの使い方を徹底解説 | Web Design Trends】
https://webdesign-trends.net/entry/8148

リストで5件目より後を隠す

上下中央寄せする4つの方法

コメントを残すコメントをキャンセル

この記事のカテゴリを含む記事一覧

汎用性がとても高い！「flexbox」の使用方法のご紹介

問題

解決策

横並びの新しい手法「flexbox」

基本の状態

DEMOはこちら

HTML

CSS

両端を除いた余白（スペース）の均等化

DEMOはこちら

HTML

CSS

両端を含めた余白（スペース）の均等化

DEMOはこちら

HTML

CSS

子要素の幅の可変 – 隙間が埋まるように幅が伸びてくれます

DEMOはこちら

HTML

CSS

高さを揃える

DEMOはこちら

HTML

CSS

折り返し＋幅の補完

DEMOはこちら

HTML

CSS

幅の固定＋可変

DEMOはこちら

HTML

CSS

PCとスマートフォンでの使い分け

DEMOはこちら

HTML

CSS

参考

コメント

コメントを残す コメントをキャンセル

関連記事

上下中央寄せする4つの方法

画像だけでなく、HTML要素をポップアップ表示するjQueryプラグイン「colorbox」

要素の幅をウインドウの幅を基準に設定できる「vw」

cssで幅、高さを計算式で設定できる「calc」

Flexboxで要素を左右中央寄せにする方法

Flexboxで要素を上下中央寄せにする方法

MD5の変換・逆変換ができるサイト「Hash Toolkit」

slickをスマートフォン時のみ有効にする

PHPで正規表現：半角数字のみかどうかを判定する

phpで特定の単語より前の文字列を取り出す方法

コメントを残すコメントをキャンセル