WEB制作についての技術情報や忘備録

ブログ

【CSS】flexboxで子要素をレイアウトする時によく使う指定

flexboxとは？

flexboxは、指定した親要素内にある子要素を揃える（レイアウト）するプロパティです。
IE9以前のブラウザには対応していませんが、2020年現在ではほとんどのブラウザで、ベンダープレフィックス無しで対応しています。

ベンダープレフィックスとは？

ブラウザのベンダーがそのブラウザの拡張機能を実装したり、草案の段階にある新しいCSSの仕様を先行で実装する際に、それが拡張機能である事を明示的にするために付ける接頭辞の事です。

flexboxの基本と構造

flexboxは親要素となる「フレックスボックス」と子要素である「フレックスアイテム」によって構成されます。
使い方は簡単で、揃えたい要素がある親要素にdisplay:flexを指定すると、フレックスボックスになります。

フレックスボックス（親要素）の直下にある子要素が全てフレックスアイテムとなります。

<div class="flex-parent">
	<div>子要素1</div>
	<div>子要素2</div>
	<div>子要素3</div>
</div>

.flex-parent {
 display: flex;
}

flexboxの初期値

flexboxの初期値は以下の通りです。設定は親要素に対するものと子要素に対するものがあります。特に指定をしなければ下記設定がデフォルトとなります。

/*フレックスボックス（親要素）のデフォルト値*/
.flex-box {
    display: flex;
	/*以下が初期値*/
    flex-direction: row;
    align-items: stretch;
    justify-content: flex-start;
    flex-wrap: nowrap;
    align-content: stretch;
}
/*フレックスアイテム（子要素）のデフォルト値*/
.flex-item {
	/*以下が初期値*/
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
}

親要素（フレックスコンテナ）に使うプロパティ

<div class="flex-block">
	<div>子要素1</div>
	<div>子要素2</div>
	<div>子要素3</div>
</div>

水平方向の揃え

左揃え

.flex-block {
	display: flex;
}

プレビューサンプル

子要素1
子要素2
子要素3

右揃え

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

プレビューサンプル

子要素1
子要素2
子要素3

中央揃え

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

プレビューサンプル

子要素1
子要素2
子要素3

両端揃え

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

プレビューサンプル

子要素1
子要素2
子要素3

最初だけ左揃えで残りは右揃え

.flex-block {
	display: flex;
	justify-content: flex-end;
}
.flex-block >:first-of-type {
	margin-right: auto;
}

プレビューサンプル

子要素1
子要素2
子要素3

最後だけ右揃えそれ以外は左揃え

.flex-block {
	display: flex;
}
.flex-block >:last-of-type {
	margin-left: auto;
}

プレビューサンプル

子要素1
子要素2
子要素3

垂直方向の揃え

<div class="flex-block">
   <div class="flex-block__dotted-box">
     <div class="flex-block__dotted-box__box1">
	    <span>BOX</span>
     </div>
   </div>
   <div class="flex-block__dotted-box">
     <div class="flex-block__dotted-box__box2">
	    <span>BOX</span>
	 </div>
   </div>
   <div class="flex-block__dotted-box">
     <div class="flex-block__dotted-box__box3">
	    <span>BOX</span>
	 </div>
   </div>
   <div class="flex-block__dotted-box">
     <div class="flex-block__dotted-box__box4">
	    <span>BOX</span>
	 </div>
   </div>
</div>

/*見本の装飾用CSS*/
.flex-block__dotted-box {
    border: 1px dotted black;
}
.flex-block__dotted-box__box1 {
    width: 50px;
    height: 50px;
    background-color: #FF0000;
}
.flex-block__dotted-box__box2 {
    width: 70px;
    height: 70px;
    background-color: #FFB600;
}
.flex-block__dotted-box__box3 {
    width: 90px;
    height: 90px;
    background-color: #26C300;
}
.flex-block__dotted-box__box4 {
    width: 110px;
    height: 110px;
    background-color: #0973CB;
}

子要素の最大高さに揃える

子要素の中で一番高さがある要素で揃えます。各要素の点線に注目してください。各要素の点線が、一番右にある要素の高さまで伸びているのがわかります。

.flex-block {
	display: flex;
}

プレビューサンプル

BOX
BOX
BOX
BOX

上に揃える

一見すると上記の「子要素の最大高さに揃える」と変わりませんが、最大高さから子要素それぞれの高さに変化しているのが点線で確認できます。

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

プレビューサンプル

BOX
BOX
BOX
BOX

下に揃える

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

プレビューサンプル

BOX
BOX
BOX
BOX

垂直方向の中央に揃える

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

プレビューサンプル

BOX
BOX
BOX
BOX

テキストのベースラインに揃える

一つ目の要素にあるテキストのベースラインで揃えます。子要素のボックスの高さではなく、テキストのベースラインで揃っているのがわかります。しかしこの設定は使い所がピンときません…ほぼ使う必要はないかも。

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

プレビューサンプル

BOX
BOX
BOX
BOX

応用編：子要素の一部だけ垂直位置を変える

疑似クラスとalign-selfを使って特定の子要素だけ位置を変化させる事も可能です。

align-selfプロパティとは？
align-itemsは子要素全体の垂直方向を指定しますが、align-selfはコンテナ内の子要素の垂直方向を個別に指定できます。また、align-itemsの設定を上書きします。なお、子要素の縦方向のマージン（上・下どちらか）にautoがあるとalign-selfは無効化されます。

.flex-block {
	display: flex;
}
.flex-block >:nth-of-type(3) {
	align-self: flex-end;
}

プレビューサンプル

BOX
BOX
BOX
BOX

子要素が並ぶ方向の指定

子要素をどの方向に並べるのかを指定します。

<div class="flex-block">
	<div class="flex-block__child">
		<p>1</p>
	</div>
	<div class="flex-block__child">
		<p>2</p>
	</div>
	<div class="flex-block__child">
		<p>3</p>
	</div>
	<div class="flex-block__child">
		<p>4</p>
	</div>
</div>

.flex-block {
	width: 100%;
}
.flex-block__child {
	width: 50px;
	height: 50px;
	border: 1px solid #ccc;
	background-color: #f7f7f7;
	padding: 5px;
	box-sizing: border-box;
	text-align: center;
}

row

子要素が左から右に並びます。（初期値）

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

プレビューサンプル

1

2

3

4

row-reverse

子要素が右から左に並びます。

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

プレビューサンプル

1

2

3

4

column

子要素が上から下に並びます。

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

プレビューサンプル

1

2

3

4

column-reverse

子要素が下から上に並びます。

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

プレビューサンプル

1

2

3

4

子要素の折り返し

親要素に子要素が収まらない場合の折り返しを指定します。

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

flex-wrapにwrapを指定すると、子要素が親要素からはみ出るような場合に、折り返しされるようになります。なお、折り返しさせない場合はnowrapを指定します。

子要素（フレックスアイテム）に使うプロパティ

幅の指定

子要素の幅を制御するプロパティは以下の通りです。全て子要素に対して指定するプロパティです。

  • flex-basis
  • flex-grow
  • flex-shrink

子要素のプロパティに何も指定しな場合の初期値は以下の通り。

.flex-item {
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
}

flex-basis

子要素の初期幅を指定するプロパティです。

<div class="flex-block">
   <div class="flex-item">
     <p>テキスト</p>
   </div>
</div>

.flex-block {
	display: flex;
	border: 1px solid #CCC;
	padding: 10px;
	width: 100%;
	box-sizing: border-box;
}
.flex-item {
	background-color: #CCC;
	width: 100px;
}
.flex-item >:first-of-type {
	background-color: #CCC;
	flex-basis: 200px;
}

プレビューサンプル

テキスト

テキスト

flex-grow

flex-growは子要素に対して、空いてるスペースに対する子要素の伸張（伸び）の有無および伸張率を相対的に指定するプロパティです。
初期値は「0」に設定されているので「伸張無し」の状態です。なお、0以外の数値を指定しないと子要素は伸びません。伸張率には明確な定義がありますが、数字が大きくなるほど伸びる程度の知識でいいと思います。

<div class="flex-block">
	<div class="flex-item1">
		<p>テキスト</p>
	</div>
	<div class="flex-item2">
		<p>テキスト</p>
	</div>
	<div class="flex-item3">
		<p>テキスト</p>
	</div>
</div>

.flex-block {
	width: 100%;
	border: 1px solid #6e6e6e;
	display: flex;
	flex-wrap: no-wrap;
}
.flex-item1 {
	background-color: #f7f7f7;
	flex-grow: 0;
}
.flex-item2 {
	background-color: #ddd;
	flex-grow: 1;
}
.flex-item3 {
	background-color: #ccc;
	flex-grow: 2;
}

プレビューサンプル

テキスト

テキスト

テキスト

flex-shrink

flex-shrinkは、親要素の幅が全ての子要素の合計幅より狭くなった時の収縮（縮む）割合を指定するプロパティです。初期値は「1」に設定されているので、「収縮無し」にしたい場合はflex-shrink: 0;とします。

このプロパティは親要素に対する子要素の縮み率となるので、flex-wrap: no-wrap;の時にしか意味を持ちません。（flex-wrapがwrapだと折り返しされるため）
縮み率は数値が大きいほど大きくなります。flex-shrink:3;はflex-shrink:1;より3倍縮む事となります。

<div class="flex-block">
	<div class="flex-item1">
		<p>テキスト</p>
	</div>
	<div class="flex-item2">
		<p>テキスト</p>
	</div>
	<div class="flex-item3">
		<p>テキスト</p>
	</div>
</div>

.flex-block {
	width: 150px;
	border: 1px solid #6e6e6e;
	display: flex;
	flex-wrap: no-wrap;
}
.flex-item1 {
	background-color: #f7f7f7;
	flex-shrink: 0;
}
.flex-item2 {
	background-color: #ddd;
	flex-shrink: 1;
}
.flex-item3 {
	background-color: #ccc;
	flex-shrink: 2;
}

プレビューサンプル

テキスト

テキスト

テキスト

子要素に対するその他の設定

垂直方向の揃え

親要素に余ったスペースがある場合に、子要素をどこに配置するかを個別に指定できます。親要素に指定するalign-itemsと同様の挙動になりますが、align-selfの方が優先されます。

■align-selfの値

  • auto（初期値）　親要素のalign-itemsの値を継承します。
  • stretch　親要素の高さやコンテンツ量の多い他の子要素の高さに合わせて広がります。
  • flex-start　親要素の開始位置から配置。
  • flex-end　親要素の終了位置から配置。
  • center　親要素の中央位置に配置。
  • baseline　テキストのベースラインに合わせる。（使う事はほとんどないかも…）
<div class="flex-block">
	<div class="flex-block__box1">
		<p>1</p>
	</div>
	<div class="flex-block__box2">
		<p>2</p>
	</div>
	<div class="flex-block__box3">
		<p>3</p>
	</div>
</div>

.flex-block {
	display: flex;
	height: 200px;
	border: 2px solid #ccc;
	padding: 5px;
	box-sizing: border-box;
}
.flex-block__box1 {
	background-color: #E59D37;
	width: 100px;
	padding: 10px;
	box-sizing: border-box;
}
.flex-block__box2 {
	background-color: #ddd;
	width: 100px;
	padding: 10px;
	box-sizing: border-box;
}
.flex-block__box3 {
	background-color: #E59D37;
	width: 100px;
	padding: 10px;
	box-sizing: border-box;
}
stretch

親要素の高さか、コンテンツ量の多い子要素の高さに合わせ広げて配置されます。

.flex-block__box1, .flex-block__box2, .flex-block__box3 {
	align-self: stretch;
}

プレビューサンプル

1

2

3

flex-start

親要素の開始位置から配置されます。（上揃え）

.flex-block__box2 {
	align-self: flex-start;
}

プレビューサンプル

1

2

3

flex-end

親要素の終点位置から配置されます。（下揃え）

.flex-block__box2 {
	align-self: flex-end;
}

プレビューサンプル

1

2

3

center

親要素の中央位置に配置されます。

.flex-block__box2 {
	align-self: center;
}

プレビューサンプル

1

2

3

子要素の並び順を変える

要素は通常、HTMLの記述順に並びますが、これを任意の順番で並べ替えることができます。管理人はレスポンシブ対応時によく使います。

<div class="flex-block">
	<div class="flex-block__item1">
		<p>1</p>
	</div>
	<div class="flex-block__item2">
		<p>2</p>
	</div>
	<div class="flex-block__item3">
		<p>3</p>
	</div>
</div>

.flex-block {
	display: flex;
	border: 2px solid #ccc;
	padding: 5px;
	box-sizing: border-box;
}
.flex-block__item1, .flex-block__item2, .flex-block__item3 {
	background-color: #f7f7f7;
	border: 1px solid #ddd;
	padding: 10px;
	margin-bottom: 10px;
}
.flex-block__item1 {
	height: 50px;
	order: 3;
}
.flex-block__item2 {
	height: 80px;
	order: 1;
}
.flex-block__item3 {
	height: 30px;
	order: 2;
}

プレビューサンプル

1

2

3

この記事を書いた人管理人

SAKURAGRAPHICA代表
会社員の傍ら、フリーランスでWEBサイトの制作やWordPressによるCMSの構築・障がい者の就労支援としてホームページ制作の職業指導員も行っております。

SAKURAGRAPHICAができること

関連記事

最近の記事 おすすめ記事
  1. 【XAMPP】エラーで起動しないMySQLをすぐに…

    2022.12.22

  2. 【HTML・CSS】<map>タグを使…

    2022.12.6

  3. 【Excel】WEEKDAY関数で出力された曜日か…

    2022.12.2

  1. 【HTML・CSS】<map>タグを使…

    2022.12.6

  2. 【HTML・CSS】レスポンシブ対応した背景画像の…

    2022.11.14

  3. 【CSS】レスポンシブ対応時に伸縮するフォントの指…

    2020.11.9

PAGE TOP