HTML-CSS入門講座

濱屋太郎

Lesson-8

Lesson-8
フレックスレイアウトを活用しましょう

目次

8.1 はじめに

8.1.1 概要

  • フレックスレイアウトとは、Flexible Box Layout Moduleのことで、その名の通りフレキシブルで簡単にレイアウトが組めます。
  • 項目の横並びはfloatやinline-blockでもできますがフレックスレイアウトを使用すると色々なレイアウトが簡単に出来ます。
  • フレックスレイアウトのメリットは「①CSSがシンプルな記述で済む、②垂直方向の位置を柔軟に調整できる、③CSSだけで並び順や折り返しを簡単に調整できる」などがあります。
  • 本レッスンでは、フレックスレイアウトの作成方法と合わせて実際のフレックスレイアウト活用例を通してフレックスレイアウトを使用方法を学びます。

参考サイト

8.2 基本形

8.2.1 ソースコード

HTML


<p>Flexコンテナ(親要素)</p>
<div class="container">
	<div class="item">Flexアイテム-1(子要素-1)</div>
	<div class="item">Flexアイテム-2(子要素-2)</div>
	<div class="item">Flexアイテム-3(子要素-3)</div>
</div>
  • フレックスレイアウトでは、親要素をFlexコンテナ、子要素をFlexアイテムと呼びます。
  • 親子関係が出来ればulなどの他のタグでも構成可能です。

CSS


.container {
	display: flex;
	padding: 10px;
	background-color: pink;
	border: 1px #333 solid;
}

.item {
	padding: 10px;
	background-color: paleturquoise;
	border: 1px #333 solid;
}
  • 親要素に「display: flex;」を指定すると親要素は、block属性になり子要素が横並びになります。
  • 親要素に「display: inline-flex」を指定すると親要素は、inline-block属性になります。

8.2.2 表示形式

Flexコンテナ(親要素)

Flexアイテム-1(子要素-1)
Flexアイテム-2(子要素-2)
Flexアイテム-3(子要素-3)

8.3 プロパティ一覧

8.3.1 Flexコンテナ(親要素)に指定可能なプロパティ

(1) display(Flexコンテナ作成)

display: (コンテナ属性);

Flexコンテナの作成を指定します。

コンテナ属性は、以下の値を指定します。

flex
block属性のFlexコンテナを作成します。
inline-flex
inline-block属性のFlexコンテナを作成します。

使用例


display: flex;
display: inline-flex;

(2) flex-direction(Flexアイテム並び順)

flex-direction: (Flexアイテムの並び順);

Flexアイテムの並び順を指定します。

Flexアイテムの並び順は、以下の値で指定します。

row(初期値)
Flexアイテムを水平方向に左から右へと配置します。
row-reverse
Flexアイテムを水平方向に右から左へと配置します。
column
Flexアイテムを垂直方向に上から下へと配置します。
column-reverse
Flexアイテムを垂直方向に下から上へと配置します。

使用例

flex-direction: column;

(3) flex-wrap(Flexアイテム折り返し)

flex-wrap: (Flexアイテム折り返し);

Flexアイテムの折り返しを指定します。

Flexアイテム折り返しは、以下の値で指定します。

nowrap(初期値)
Flexアイテムを折り返さずに一列に配置します。
wrap
複数行のFlexアイテムを上から下へと配置します。
wrap-reverse
複数行のFlexアイテムを下から上へと配置します。

使用例

flex-wrap: wrap;

(4) flex-flow(Flexアイテム並び・折り返し一括指定)

flex-flow: (Flexアイテム並び・折り返し一括指定);

flex-directionとflex-wrapを一括で指定します。

使用例

flex-flow: column wrap;

(5) justify-content(Flexアイテム水平位置)

justify-content: (Flexアイテム水平位置);

Flexアイテムの水平方向の位置を指定します。

Flexアイテム水平位置は、以下の値で指定します。

flex-start(初期値)
Flexアイテムを左揃えで配置します。
flex-end
Flexアイテムを右揃えで配置します。
center
Flexアイテムを左右中央揃えで配置します。
space-between
両端のFlexアイテムを余白を空けずに配置し他の要素は均等に間隔を空けて配置します。
space-around
両端のFlexアイテムも含めて均等な間隔を空けて配置します。

使用例

justify-content: center;

(6) align-items(Flexアイテム垂直位置)

align-items: (Flexアイテム垂直位置);

Flexアイテムの垂直方向の位置を指定します。

Flexアイテム垂直位置は、以下の値で指定します。

stretch(初期値)
Flexアイテムを上下の余白を埋めるように配置します。
flex-start
Flexアイテムを上揃えで配置します。
flex-end
Flexアイテムを下揃えで配置します。
center
Flexアイテムを上下中央揃えで配置します。
baseline
Flexアイテムをベースラインに合わせて配置します。

使用例

align-items: center;

(7) align-content(Flexアイテム行の垂直位置)

align-content: (Flexアイテム行の垂直位置);

Flexアイテムの行の垂直方向の位置を指定します。

Flexアイテム行の垂直位置は、以下の値で指定します。

stretch(初期値)
Flexアイテムの行を余白を埋めるように配置します。
flex-start
Flexアイテムの行を上揃えで配置します。
flex-end
Flexアイテムの行を下揃えで配置します。
center
Flexアイテムの行を上下中央揃えで配置します。
pace-between
最上行と最下行のFlexアイテムを余白を空けずに配置し他のアイテム行は均等に間隔を空けて配置します。
space-around
すべてのFlexアイテム行が均等に間隔を空けて配置します。

使用例

align-content: center;

8.3.2 Flexアイテム(子要素)に指定可能なプロパティ

(1) order(Flexアイテム並び順)

order: (Flexアイテム並び順);

Flexアイテムの並び順を指定します。

Flexアイテム並び順は、以下の値で指定します。

(並び順)
Flexアイテム(子要素)の順番をマイナスを含む数値で指定します。(初期値は0)

使用例

order: 2;

(2) flex-grow(Flexアイテム伸び率)

flex-grow: (Flexアイテム伸び率);

Flexアイテムの伸び率を指定します。

Flexアイテム伸び率は、以下の値で指定します。

(伸び率)
Flexコンテナ(親要素)に横方向の余白がある時にFlexアイテム(子要素)を伸ばす比率を数値で指定します。(初期値は0でマイナス値は無効)

使用例

flex-grow: 2;

(3) flex-shrink(Flexアイテム縮み率)

flex-shrink: (Flexアイテム縮み率);

Flexアイテムの縮み率を指定します。

Flexアイテム縮み率は、以下の値で指定します。

(縮み率)
Flexアイテム(子要素)の横方向の合計がFlexコンテナ(親要素)に入りきらない時にFlexアイテム(子要素)をし縮める比率を数値で指定します。(初期値は1でマイナス値は無効)

使用例

flex-shrink: 2;

(4) flex-basis(Flexアイテムベース幅)

flex-basis: (Flexアイテムベース幅);

Flexアイテムのベースの幅を指定します。

Flexアイテムベース幅は、以下の値で指定します。

(ベース幅)
Flexアイテム(子要素)の幅を指定します。(初期値はauto)

使用例

flex-basis: 20%;

(5) flex(Flexアイテム並び順・伸び率・縮み率一括指定)

flex: (orderの値) (flex-growの値) (flex-shrinkの値);

orderとflex-growとflex-shrinkを一括で指定します。

使用例

flex: 2 2 2;

(6) align-self(Flexアイテム垂直位置)

align-self: (Flexアイテム垂直位置);

Flexアイテムの垂直方向の位置を指定します。Flexコンテナ(親要素)に余白がなければ、どれを指定しても表示は変わりません。Flexコンテナ(親要素)にalign-itemsを指定することで垂直方向の位置を指定することもできますがFlexアイテムにalign-selfが指定されているとこちらが優先されます。

Flexアイテム垂直位置は、以下の値で指定します。

auto(初期値)
Flexコンテナ(親要素)のalign-itemsの値を使用します。
stretch
Flexアイテムを上下の余白を埋めるように配置します。
flex-start
Flexアイテムを上揃えで配置します。
flex-end
Flexアイテムを下揃えで配置します。
center
Flexアイテムを中央揃えで配置します。
baseline
Flexアイテムをベースラインに合わせて配置します。

使用例

align-self: center;

8.3.3 関連事項

(1) フレックスレイアウトでの垂直方向の指定

フレックスレイアウトでは垂直方向の位置を指定するvertical-alignを使用できません。Flexコンテナ(親要素)のalign-itemsやFlexアイテム(子要素)のalign-selfを使用します。

8.4 Flexコンテナ(親要素)のプロパティ

8.4.1 display(Flexコンテナ作成)

Flexコンテナの作成を指定します。

(1) display: flex;

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

(2) display: inline-flex;

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

8.4.2 flex-direction(Flexアイテム並び順)

Flexアイテムの並び順を指定します。

row(初期値)
Flexアイテムを水平方向に左から右へと配置します。
row-reverse
Flexアイテムを水平方向に右から左へと配置します。
column
Flexアイテムを垂直方向に上から下へと配置します。
column-reverse
Flexアイテムを垂直方向に下から上へと配置します。

(1) flex-direction: row;(初期値)

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

(2) flex-direction: row-reverse;

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

(3) flex-direction: column;

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

(4) flex-direction: column-reverse;

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

8.4.3 flex-wrap(Flexアイテム折り返し)

Flexアイテムの折り返しを指定します。

nowrap(初期値)
Flexアイテムを折り返さずに一列に配置します。
wrap
複数行のFlexアイテムを上から下へと配置します。
wrap-reverse
複数行のFlexアイテムを下から上へと配置します。

(1) flex-wrap: nowrap;(初期値)

子要素-1
子要素-2
子要素-3
子要素-4
子要素-5
子要素-6
子要素-7
子要素-8
子要素-9
子要素-10
子要素-11
子要素-12

(2) flex-wrap: wrap;

子要素-1
子要素-2
子要素-3
子要素-4
子要素-5
子要素-6
子要素-7
子要素-8
子要素-9
子要素-10
子要素-11
子要素-12

(3) flex-wrap: wrap-reverse;

子要素-1
子要素-2
子要素-3
子要素-4
子要素-5
子要素-6
子要素-7
子要素-8
子要素-9
子要素-10
子要素-11
子要素-12

8.4.4 flex-flow(Flexアイテム並び・折り返し一括指定)

flex-directionとflex-wrapを一括で指定します。

flex-flow: (flex-directionの値) (flex-wrapの値);

8.4.5 justify-content(Flexアイテム水平位置)

Flexアイテムの水平方向の位置を指定します。

flex-start(初期値)
Flexアイテムを左揃えで配置します。
flex-end
Flexアイテムを右揃えで配置します。
center
Flexアイテムを左右中央揃えで配置します。
space-between
両端のFlexアイテムを余白を空けずに配置し他の要素は均等に間隔を空けて配置します。
space-around
両端のFlexアイテムも含めて均等な間隔を空けて配置します。

(1) justify-content: flex-start;(初期値)

子要素-1
子要素-2
子要素-3
子要素-4

(2) justify-content: flex-end;

子要素-1
子要素-2
子要素-3
子要素-4

(3) justify-content: center;

子要素-1
子要素-2
子要素-3
子要素-4

(4) justify-content: space-between;

子要素-1
子要素-2
子要素-3
子要素-4

(5) justify-content: space-around;

子要素-1
子要素-2
子要素-3
子要素-4

8.4.6 align-items(Flexアイテム垂直位置)

Flexアイテムの垂直方向の位置を指定します。

stretch(初期値)
Flexアイテムを上下の余白を埋めるように配置します。
flex-start
Flexアイテムを上揃えで配置します。
flex-end
Flexアイテムを下揃えで配置します。
center
Flexアイテムを上下中央揃えで配置します。
baseline
Flexアイテムをベースラインに合わせて配置します。

(1) align-items: stretch;(初期値)

親要素:height: 200px;

子要素-1:font-size: 20px;

子要素-1:font-size: 30px;

子要素-1:font-size: 40px;

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

(2) align-items: flex-start;

親要素:height: 200px;

子要素-1:font-size: 20px;

子要素-1:font-size: 30px;

子要素-1:font-size: 40px;

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

(3) align-items: flex-end;

親要素:height: 200px;

子要素-1:font-size: 20px;

子要素-1:font-size: 30px;

子要素-1:font-size: 40px;

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

(4) align-items: center;

親要素:height: 200px;

子要素-1:font-size: 20px;

子要素-1:font-size: 30px;

子要素-1:font-size: 40px;

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

(5) align-items: baseline;

親要素:height: 200px;

子要素-1:font-size: 20px;

子要素-1:font-size: 30px;

子要素-1:font-size: 40px;

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

8.4.7 align-content(Flexアイテム行の垂直位置)

Flexアイテムの行の垂直方向の位置を指定します。

stretch(初期値)
Flexアイテムの行を余白を埋めるように配置します。
flex-start
Flexアイテムの行を上揃えで配置します。
flex-end
Flexアイテムの行を下揃えで配置します。
center
Flexアイテムの行を上下中央揃えで配置します。
space-between
最上行と最下行のFlexアイテムを余白を空けずに配置し他のアイテム行は均等に間隔を空けて配置します。
space-around
すべてのFlexアイテム行が均等に間隔を空けて配置します。

(1) align-content: stretch;(初期値)

親要素:flex-wrap: wrap; height: 250px;(幅狭時:height: 250px;)

子要素-1
子要素-2
子要素-3
子要素-4
子要素-5
子要素-6
子要素-7
子要素-8
子要素-9
子要素-10
子要素-11
子要素-12
子要素-13
子要素-14

(2) align-content: flex-start;

親要素:flex-wrap: wrap; height: 250px;(幅狭時:height: 250px;)

子要素-1
子要素-2
子要素-3
子要素-4
子要素-5
子要素-6
子要素-7
子要素-8
子要素-9
子要素-10
子要素-11
子要素-12
子要素-13
子要素-14

(3) align-content: flex-end;

親要素:flex-wrap: wrap; height: 250px;(幅狭時:height: 250px;)

子要素-1
子要素-2
子要素-3
子要素-4
子要素-5
子要素-6
子要素-7
子要素-8
子要素-9
子要素-10
子要素-11
子要素-12
子要素-13
子要素-14

(4) align-content: center;

親要素:flex-wrap: wrap; height: 250px;(幅狭時:height: 250px;)

子要素-1
子要素-2
子要素-3
子要素-4
子要素-5
子要素-6
子要素-7
子要素-8
子要素-9
子要素-10
子要素-11
子要素-12
子要素-13
子要素-14

(5) align-content: space-between;

親要素:flex-wrap: wrap; height: 250px;(幅狭時:height: 250px;)

子要素-1
子要素-2
子要素-3
子要素-4
子要素-5
子要素-6
子要素-7
子要素-8
子要素-9
子要素-10
子要素-11
子要素-12
子要素-13
子要素-14

(6) align-content: space-around;

親要素:flex-wrap: wrap; height: 250px;(幅狭時:height: 250px;)

子要素-1
子要素-2
子要素-3
子要素-4
子要素-5
子要素-6
子要素-7
子要素-8
子要素-9
子要素-10
子要素-11
子要素-12
子要素-13
子要素-14

8.5 Flexアイテム(子要素)のプロパティ

8.5.1 order(Flexアイテム並び順)

Flexアイテムの並び順を指定します。

(並び順)
Flexアイテム(子要素)の順番をマイナスを含む数値で指定します。(初期値は0)

(1) order: (数値);

子要素-1:order: 4;

子要素-2:order: 2;

子要素-3:order: 1;

子要素-4:order: 3;

子要素-1
子要素-2
子要素-3
子要素-4

8.5.2 flex-grow(Flexアイテム伸び率)

Flexアイテムの伸び率を指定します。

(伸び率)
Flexコンテナ(親要素)に横方向の余白がある時にFlexアイテム(子要素)を伸ばす比率を数値で指定します。(初期値は0でマイナス値は無効)

(1) flex-grow: (数値);

flex-grow指定なし

子要素-1
子要素-2
子要素-3
子要素-4

子要素-1:flex-grow: 4;

子要素-2:flex-grow: 2;

子要素-3:flex-grow: 1;

子要素-4:flex-grow: 2;

子要素-1
子要素-2
子要素-3
子要素-4

8.5.3 flex-shrin(Flexアイテム縮み率)

Flexアイテムの縮み率を指定します。

(縮み率)
Flexアイテム(子要素)の横方向の合計がFlexコンテナ(親要素)に入りきらない時にFlexアイテム(子要素)を縮める比率を数値で指定します。(初期値は1でマイナス値は無効)

(1) flex-shrink: (数値);

子要素にwidth: 40%;を指定(40% × 4子要素 = 160%)

flex-shrink指定なし

子要素-1
子要素-2
子要素-3
子要素-4

子要素にwidth: 40%;を指定(40% × 4子要素 = 160%)

子要素-1:flex-shrink: 4;

子要素-2:flex-shrink: 2;

子要素-3:flex-shrink: 1;

子要素-4:flex-shrink: 2;

子要素-1
子要素-2
子要素-3
子要素-4

8.5.4 flex-basis(Flexアイテムベース幅)

Flexアイテムのベースの幅を指定します。

(ベース幅)
Flexアイテム(子要素)の幅を指定します。(初期値はauto)

(1) flex-basis: (幅);

子要素-1:flex-basis: 50%;

子要素-2:flex-basis: 20%;

子要素-3:flex-basis: 15%;

子要素-4:flex-basis: 15%;

子要素-1
子要素-2
子要素-3
子要素-4

8.5.5 flex(Flexアイテム並び順・伸び率・縮み率一括指定)

orderとflex-growとflex-shrinkを一括で指定します。

flex: (orderの値) (flex-growの値) (flex-shrinkの値);

8.5.6 align-self(Flexアイテム垂直位置)

Flexアイテムの垂直方向の位置を指定します。Flexコンテナ(親要素)に余白がなければ、どれを指定しても表示は変わりません。Flexコンテナ(親要素)にalign-itemsを指定することで垂直方向の位置を指定することもできますがFlexアイテムにalign-selfが指定されているとこちらが優先されます。

auto(初期値)
Flexコンテナ(親要素)のalign-itemsの値を使用します。
stretch
Flexアイテムを上下の余白を埋めるように配置します。
flex-start
Flexアイテムを上揃えで配置します。
flex-end
Flexアイテムを下揃えで配置します。
center
Flexアイテムを中央揃えで配置します。
baseline
Flexアイテムをベースラインに合わせて配置します。

(1) align-self: auto;、stretch;、flex-start;、flex-end;、center;、baseline;

親要素:height: 200px;

子要素-1:align-self: auto;

子要素-2:align-self: stretch;

子要素-3:align-self: flex-start;

子要素-4:align-self: flex-end;

子要素-5:align-self: center;

子要素-6:align-self: baseline;

子要素-7:align-self: baseline; font-size: 200%;

子要素-1
子要素-2
子要素-3
子要素-4
子要素-5
子要素-6
子要素-7

8.6 フレックスレイアウト作成例

8.6.1 ワイヤーフレーム

ワイヤーフレーム

8.6.2 ソースコード

ソースコード表示

HTML


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>フレックスレイアウトサンプル(濱屋)</title>
<style>
body,div,h1,h2,h3,h4,h5,h6,pre,p,a,select,header,nav,main,section,footer {
	padding: 0;
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	word-wrap: break-word;
	box-sizing: border-box;
}
body {
	padding: 10px;
}
div.container {
	max-width: 960px;
	width: 100%;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
}
header {
	order: 1;
	flex-basis: 100%;
	display: flex;
	align-items: flex-end;
	background-color: #14736a;
}
header h1 {
	flex-basis: 45%;
	padding: 10px 0 0 20px;
}
header h1 img {
	width: 20%;
}
header h1 span {
	color: #fff;
	font-size: 140%;
	padding-left: 10px;
	vertical-align: bottom;
}
header nav {
	align-items: flex-end;
	justify-content: flex-end;
	flex-basis: 55%;
}
header nav ul {
	list-style: none;
	display: flex;
	margin: 0 0 10px 0;
}
header nav ul li {
	flex-basis: 22%;
	margin-right: 10px;
}
header nav ul li a {
	display: block;
	line-height: 2;
	font-size: 120%;
	color: #000;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
	background-color: #bffff9;
	border-radius: 10px;
}
header nav ul li a:hover {
	opacity: 0.6;
}
main {
	order: 3;
	flex-basis: calc(100% - 220px);
	background-color: #ebfffd;
	padding: 10px 20px 10px 20px;
}
main h2 {
	font-size: 140%;
	padding: 10px 0;
}
main article {
	display: flex;
	flex-wrap: wrap;
	padding-bottom: 10px;
}
main article h3 {
	flex-basis: 100%;
	font-size: 140%;
}
main article div.img {
	flex-basis: 30%;
}
main article div.img img {
	width: 100%;
	border: #ccc 1px solid;
	border-radius: 10px;
}
main article div.dsc {
	flex-basis: 70%;
}
main article div.dsc p {
	font-size: 120%;
	padding: 0 0 0 20px;
}
aside {
	order: 2;
	flex-basis: 180px;
	padding: 20px;
	background-color: #bffff9;
}
aside h2 {
	font-size: 120%;
}
aside ul {
	padding-left: 20px;
	margin: 5px 0;
}
footer {
	order: 4;
	flex-basis: 100%;
	text-align: center;
	background-color: #14736a;
}
footer small {
	line-height: 3;
	font-size: 100%;
	color: #fff;
}
</style>
</head>
<body>
	<div class="container">
		<header>
			<h1>
				<img src="images/flexbox-logo-01.png" alt="濱屋">
				<span>世界のこだわり商品を販売</span>
			</h1>
			<nav>
				<ul class="flex-a1-nav">
					<li><a href="#">トップ</a></li>
					<li><a href="#">商品情報</a></li>
					<li><a href="#">企業情報</a></li>
					<li><a href="#">お問合せ</a></li>
				</ul>
			</nav>
		</header>
		<main>
			<h2>お勧め商品情報</h2>
			<article>
				<h3>シーサーの飾り物</h3>
				<div class="img"><img src="images/flexbox-img-01.jpg" alt="沖縄のシーサー飾り"></div>
				<div class="dsc">
					<p>沖縄のシーサーの飾り物です。
					シーサーは沖縄県などで伝説の獣像で魔除けの意味を持ち屋根の上に設置されることが多いとされています。
					今回の商品はシーサーをベースにした飾り物で部屋の中に飾ることで魔除けとしても使えるかもしれません。</p>
				</div>
			</article>
			<article>
				<h3>インディアンの飾り物</h3>
				<div class="img"><img src="images/flexbox-img-02.jpg" alt="アメリカのイオンディアン飾り"></div>
				<div class="dsc">
					<p>アメリカの先住民であるインディアンが作成した飾り物です。
					この飾り物はアメリカのグランドキャニオンを拠点とするインディアンが作成しました。
					作成したインディアンの話ではインディアンが信仰する大地の神が宿っているとのことです。</p>
				</div>
			</article>
		</main>
		<aside>
			<h2>お知らせ</h2>
			<ul>
				<li>5月:GWお休み情報</li>
				<li>4月:新型コロナ情報</li>
				<li>4月:花見情報</li>
				<li>1月:初売り情報</li>
			</ul>
			<h2>ニュース</h2>
			<ul>
				<li>ドイツの新型食器</li>
				<li>ハワイ旅行とお土産</li>
				<li>鬼滅の刃の海外展開</li>
			</ul>
		</aside>
		<footer>
			<small>Copyright&copy; 2021 濱屋 All rights reserved.</small>
		</footer>
	</div>
</body>
</html>

8.6.3 表示形式