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

CSS, HTML5 / CSS3HTML&CSS入門, レスポンシブ, 横並びレイアウト

こんにちは。サイバーブリッジ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月現在では、主要なブラウザはすでに対応しており基本的にベンダープレフィックスをつけなくても正常に動作しますが、一部の古いバージョンのブラウザだと正しく表示されないため、注意が必要です。

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

Posted by リク