Web制作

レスポンシブデザイン

【2019年＊保存版】FlexBoxで簡単に横並びレイアウト｜初心者でも大丈夫

posted : 2019.11.12 updated : 2022.04.19

こんにちは。サイバーブリッジWeb制作担当の久保田です。

あなたは要素を横並びにする際、どんな手法を使いますか？
float？inline-block？それともtable？

横並びレイアウトの選択肢はいくつかありますが、flexboxなら簡潔なコードで順番を入れ替えたり、均等に配置したりなど自由なレイアウトを組むことができます。

この記事では、そんなflexboxの使い方から実装方法までを詳しく解説していきます。

FlexBoxとは？

FlexBoxフレックスボックスとは、CSS3の新機能を使用したレイアウトモジュールで、正式名称は「Flexible Box Layout Moduleフレキシブルボックスレイアウトモジュール」と言います。

一昔前までは、floatフロートを使用して横並びレイアウト組んでいましたが、最近ではflexboxを使用して横並びに配置する方法が主流になっています。

flexboxは、簡潔なコードでレイアウトを組むことができ、細かいところを自動で調整してくれるとっても優秀なレイアウトモジュールです。

また、レスポンシブに強く、横並びから縦一列に並べ替えるものとっても簡単なので初心者コーダーさんも是非使ってみてください。

Flexboxのブラウザの対応状況

2019年最新のflexboxブラウザの対応状況は、基本的にどのブラウザも最新バージョンでは対応しています。

注意が必要なブラウザ

IE 6-9	非対応
IE 10	ベンダープレフィックス(-ms-)が必要
Safari 6.1-8	ベンダープレフィックス(-webkit-)が必要
Android 2.1-4.3	ベンダープレフィックス(-webkit-)が必要
iOS Safari 7-8.4	ベンダープレフィックス(-webkit-)が必要
Chrome 21-28	ベンダープレフィックス(-webkit-)が必要
Opera 10-11.5	非対応
Opera 15-16	ベンダープレフィックス(-webkit-)が必要

IE 6-9とOpera 10-11.5では、flexboxを使用することができません。これらが推奨環境に含まれてしまっている場合はflexboxを使用するのを避けましょう。

また、最新のIE11でもいくつかバグが報告されているため、flexboxを使用する際は動作確認を行った方がいいでしょう。

FlexBoxの基本

それではflexboxの基本から学んでいきましょう。

flexboxは、HTML内に親要素となるコンテナを作成し、その中に子要素となるアイテムを作ります。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>Hello World !</title>
	<link rel="stylesheet" href="css/styles.css">
    </head>
    <body>
	<div class="flex-container">
		<div class="flex-item">子要素アイテム1</div>
		<div class="flex-item">子要素アイテム2</div>
		<div class="flex-item">子要素アイテム3</div>
	</div>
    </body>
</html>

分かりやすいようにCSSで背景色をつけて、親要素にdisplay: flex;指定します。

@charset "UTF-8";

/* 親要素(コンテナ) */
.flex-container {
	background-color: #dfdfdf;
　　　　　display: flex;
}

/* 子要素(アイテム) */
.flex-item {
	background-color: #343434;
	color: #fff;
}

たった一行記述しただけで簡単に要素を横並びにすることができました。

次に、レイアウトを調整します。
flexboxではコンテナとアイテムにそれぞれプロパティを指定します。

ベースとなるHTML&CSSは⬇︎になります。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>Hello World !</title>
	<link rel="stylesheet" href="css/styles.css">
    </head>
    <body>
	<div class="flex-container">
		<div class="flex-item1">①</div>
		<div class="flex-item2">②</div>
		<div class="flex-item3">③</div>
　　　　　　　　<div class="flex-item4">④</div>
		<div class="flex-item5">⑤</div>
	</div>
    </body>
</html>

@charset "UTF-8";

/* 親要素(コンテナ) */
.flex-container {
	background-color: #dfdfdf;
	display: flex;
}

/* 子要素(アイテム) */
.flex-item {
	margin: 10px auto;
	padding: 5px 10px;
	box-sizing: border-box;
	background-color: #343434;
	color: #fff;
}

コンテナに使用できるプロパティ一覧

コンテナ(親要素)に使用できるプロパティ

flex-direction
アイテムの並び順を指定する
flex-wrap
アイテムの折り返しを指定する
flex-flow
アイテムの並び順と折り返しを一括で指定する
justify-content
アイテムの水平方向の位置を指定する
align-items
アイテムの垂直方向の位置を指定する
align-content
アイテムの行の垂直方向の位置を指定する

アイテムの並び順を指定する | flex-direction

flex-directionフレックスディレクションはアイテムを配置する順番を指定するプロパティです。

flex-direction: row; (デフォルト)
アイテムが水平方向に左から右へと配置されます。

.flex-container {
	display: flex;
	flex-direction: row;
}

flex-direction: row-reverse;
アイテムが水平方向に左から右へと配置されます。

.flex-container {
	display: flex;
	flex-direction: row-reverse;
}

flex-direction: column;
アイテムが垂直方向に上から下へと配置されます。

.flex-container {
	display: flex;
	flex-direction: column;
}

flex-direction: column-reverse;
アイテムが垂直方向に下から上へと配置されます

.flex-container {
	display: flex;
	flex-direction: column-reverse;
}

アイテムの折り返し | flex-wrap

flex-wrapフレックスラップは、アイテムの折り返しを指定するプロパティです。

flex-wrap: nowrap; (デフォルト)
アイテムを折り返さずに一列に配置します。

.flex-container {
	display: flex;
	flex-wrap: nowrap;
}

flex-wrap: wrap;
アイテムを折り返して複数行に上から下に並べます。

.flex-container {
	display: flex;
	flex-wrap: wrap;
}

flex-wrap: wrap-reverse;
アイテムを折り返して、複数行に下から上に並べます。

.flex-container {
	display: flex;
	flex-wrap: wrap-reverse;
}

アイテムの並び順と折り返しを一括指定 | flex-flow

flex-flowフレックスフローは、flex-direction(並び順を指定)とflex-wrap(折り返しを指定する)を一括で設定するプロパティです。

記述する時は⬇︎のように値の間に半角スペースを開けて記述します。

.flex-container {
	flex-flow: flex-directionの値 flex-wrapの値;
}

例として、アイテムの並びをデフォルトの左から右へ、折り返して上から下に配置してみます。

.flex-container {
	display: flex;
	flex-flow: row wrap;
}

水平方向の位置 | justify-content

justify-contentジャスティファイコンテンツは、水平方向の位置を指定するプロパティです。

justify-content: flex-start;
アイテムを左揃えで表示します。

.flex-container {
	display: flex;
	justify-content: flex-start;
}

justify-content: flex-end;
アイテムを右揃えで表示します。

.flex-container {
	display: flex;
	justify-content: flex-end;
}

justify-content: center;
アイテムを中央で表示します。

.flex-container {
	display: flex;
	justify-content: center;
}

justify-content: space-between;
両端のアイテムを余白を空けずに配置し、他の要素は均等に間隔を空けて配置します。

.flex-container {
	display: flex;
	justify-content: space-between;
}

justify-content: space-around;
両端のアイテムも含めて、均等な間隔を空けて配置します。

.flex-container {
	display: flex;
	justify-content: space-around;
}

垂直方向の位置 | align-items

align-itemsアラインアイテムスは、要素の垂直方向の位置を指定するプロパティです。

align-items: stretch;（デフォルト）
アイテムの上下の余白を埋めるように配置します。

.flex-container {
	display: flex;
	align-items: stretch;
}

align-items: flex-start;
アイテムを上揃えで配置します。

.flex-container {
	display: flex;
	align-items: flex-start;
}

align-items: flex-end;
アイテムを下揃えで配置します。

.flex-container {
	display: flex;
	align-items: flex-end;
}

align-items: center;
アイテムを上下中央揃えで配置します。

.flex-container {
	display: flex;
	align-items: center;
}

align-items: baseline;
アイテムをベースラインに合わせて配置します。

.flex-container {
	display: flex;
	align-items: baseline;
}

複数行の時の垂直方向の位置 | align-content

align-contentアラインコンテンツプロパティは「justify-content」と似ていますが、align-contentプロパティはクロス軸の垂直方向に揃えて配置します。

align-content: stretch; (デフォルト)
アイテムの行が余白を埋めるように配置されます。

.flex-container {
display: flex;
align-content: stretch;
}

align-content: flex-start;
アイテムの行が上揃えで配置されます。

.flex-container {
	display: flex;
	align-content: flex-start;
}

align-content: flex-end;
アイテムの行が下揃えで配置されます。

.flex-container {
	display: flex;
	align-content: flex-end;
}

align-content: space-between;
最上行と最下行のアイテムが余白を空けずに配置され、他のアイテム行は均等に間隔を空けて配置されます。

.flex-container {
	display: flex;
	align-content: space-between;
}

align-content: space-around;
すべてのアイテム行が均等に間隔を空けて配置されます。

.flex-container {
	display: flex;
	align-content: space-around;
}

アイテムに使用できるプロパティ一覧

アイテム(子要素)に使用できるプロパティ

order
アイテムの並び順を指定する
flex-grow
アイテムの伸び率を指定する
flex-shrink
アイテムの縮み率を指定する
flex-basis
アイテムのベースの幅を指定する
flex
アイテムの伸び率、縮み率、ベースの幅を一括指定する
align-self
アイテムの垂直方向の位置を指定する

ベースとなるHTMLはこちら⬇︎です。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>Hello World !</title>
	<link rel="stylesheet" href="css/styles.css">
    </head>
    <body>
	<div class="flex-container">
		<div class="flex-item1">①</div>
		<div class="flex-item2">②</div>
		<div class="flex-item3">③</div>
		<div class="flex-item4">④</div>
		<div class="flex-item5">⑤</div>
	</div>
    </body>
</html>

アイテムの並び順を指定する | order

orderオーダーは、アイテムの1つ1つにorderを指定すると、HTMLの記述順に関わらず要素の並び順を指定することができます。

.flex-item1 { order:3; }
.flex-item2 { order:4; }
.flex-item3 { order:1; }
.flex-item4 { order:5; }
.flex-item5 { order:2; }

アイテムの伸び率を指定する | flex-grow

flex-growフレックスグロウは、フリーのポジティブなスペースがある場合にアイテムが他のアイテムと比較してどのくらいの大きさになるかを指定するプロパティです。
※デフォルト値は0。整数または小数部分のある数値、マイナスの値は無効。

.flex-item1 { flex-grow:1; }
.flex-item2 { flex-grow:2; }
.flex-item3 { flex-grow:1; }
.flex-item4 { flex-grow:3; }
.flex-item5 { flex-grow:2; }

アイテムの縮み率を指定する | flex-shrink

flex-shrinkフレックスシュリンクは、flex-growとは逆で、フリーのネガティブなスペースにコンテナ内のアイテムが残りのアイテムと比較してどのくらい縮まるかを指定するプロパティです。
※デフォルト値は1。整数または小数部分のある数値、マイナスの値は無効。

.flex-item1 { flex-grow:3; }
.flex-item2 { flex-grow:2; }
.flex-item3 { flex-grow:3; }
.flex-item4 { flex-grow:1; }
.flex-item5 { flex-grow:2; }

アイテムのベースの幅を指定する | flex-basis

flex-basisフレックスベーシスは、アイテムの基本幅を指定するプロパティです。
※初期値はauto

.flex-item1 { flex-basis: 30%; }
.flex-item2 { flex-basis: 5%; }
.flex-item3 { flex-basis: 20%; }
.flex-item4 { flex-basis: 15%; }
.flex-item5 { flex-basis: 20%; }

アイテムの伸び率、縮み率、ベースの幅を一括指定する| flex

flexフレックスは、flex-grow, flex-shrink, flex-basisの3つの値をまとめて指定するプロパティ
※上記の3つのプロパティをそれぞれ指定するのではなく、flexを使ってまとめて指定する方法が推奨されています。

.flex-item1 { flex:1 0 30%; }
.flex-item2 { flex:2 0 5%; }
.flex-item3 { flex:1 0 20%; }
.flex-item4 { flex:3 0 15%; }
.flex-item5 { flex:2 0 20%; }

それぞれの値が影響して表示が変化するので、値を変えてみてどのような変化が生まれるのか慣れていくことで使い方を覚えられると思います。

アイテムの垂直方向の位置を指定する | align-self

align-itemsアラインアイテムスでの指定を上書きしアイテムの垂直方向の位置を指定するプロパティです。コンテナに余白がなければ、どれを指定しても表示は変わりません。
※「float」や「clear」、「vertical-align」は使用できません。

auto (デフォルト)
親要素のalign-itemsの値を使用
flex-start
アイテムを上揃えで配置
flex-end
アイテムを下揃えで配置
center
アイテムを中央揃えで配置
baselne
アイテムをベースラインに合わせて配置
stretch
アイテムを上下の余白を埋めるように配置

.flex-item1 {
	height: 100px;
	align-self: stretch;
}
.flex-item2 {
	height: 50px;
	align-self: flex-start;
}
.flex-item3 {
	height: 80px;
	align-self: baseline;
}
.flex-item4 {
	height: 45px;
	align-self: center;
}
.flex-item5 {
	height: 72px;
	align-self: flex-end;
}

まとめ

flexboxは、覚えるまでに少し苦労しますが、覚えてしまえばかなり便利なので、使いながら覚えていきましょう。

2019年11月現在では、主要なブラウザはすでに対応しており基本的にベンダープレフィックスをつけなくても正常に動作しますが、一部の古いバージョンのブラウザだと正しく表示されないため、注意が必要です。

各ブラウザの対応状況はこちらから確認できます。

https://caniuse.com/

この記事を書いた人

その他記事はこちら

久保田里佳子

Web事業部マネージャー / デザイナー

1992年生まれ。2児の母。入社後、営業を経て独学でhtml/css・Webデザイン・マーケティングを学び、現在はWeb関連全般に携わっています。趣味はお酒・ゲーム・漫画・アニメとかなりのインドアですが、たまにゴルフもやります。特技は超高速クッキング(見た目より味重視)。全てのお客様が笑顔になる仕事を心がけてます。

その他記事はこちら