HTML-CSS 入門講座

HTML-CSS 入門講座

こんにちは！
今日も頑張ろう

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

目次

L8.1 はじめに

L8.1.1 概要

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

参考サイト

L8.2 基本形

L8.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 属性になります。

L8.2.2 表示形式

Flexコンテナ（親要素）

Flexアイテム-1（子要素-1）
Flexアイテム-2（子要素-2）
Flexアイテム-3（子要素-3）

L8.3 Flex コンテナ（親要素）に指定可能なプロパティ

L8.3.1 display（Flex コンテナ作成）

display: コンテナ属性;

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

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

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

(1) display: flex;

(a) ソースコード
ソースコード表示

HTML


<!-- 子要素の div 間のすきまをつくらないために横に並べて記述 -->
<div class="flex-s-01"><div>子要素-1-1</div><div>子要素-1-2</div><div>子要素-1-3</div></div><div class="flex-s-01"><div>子要素-2-1</div><div>子要素-2-2</div><div>子要素-2-3</div></div>

CSS


.flex-s-01 {
	display: flex;
	padding: 10px;
	background-color: pink;
	border: 1px #333 solid;
}
.flex-s-01 div {
	padding: 10px;
	background-color: paleturquoise;
	border: 1px #333 solid;
}
(b) 表示形式
子要素-1-1
子要素-1-2
子要素-1-3
子要素-2-1
子要素-2-2
子要素-2-3

(2) display: inline-flex;

(a) ソースコード
ソースコード表示

HTML


<!-- 子要素の div 間のすきまをつくらないために横に並べて記述 -->
<div class="flex-s-02"><div>子要素-1-1</div><div>子要素-1-2</div><div>子要素-1-3</div></div><div class="flex-s-02"><div>子要素-2-1</div><div>子要素-2-2</div><div>子要素-2-3</div></div>

CSS


.flex-s-02 {
	display: inline-flex;
	padding: 10px;
	background-color: pink;
	border: 1px #333 solid;
}
.flex-s-02 div {
	padding: 10px;
	background-color: paleturquoise;
	border: 1px #333 solid;
}
(b) 表示形式
子要素-1-1
子要素-1-2
子要素-1-3
子要素-2-1
子要素-2-2
子要素-2-3

L8.3.2 flex-direction（Flex アイテム並び順）

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

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

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

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

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

(a) ソースコード
ソースコード表示

HTML


<div class="flex-s-01" style="flex-direction: row;">
	<div>子要素-1</div>
	<div>子要素-2</div>
	<div>子要素-3</div>
</div>

CSS


.flex-s-01 {
	display: flex;
	padding: 10px;
	background-color: pink;
	border: 1px #333 solid;
}
.flex-s-01 div {
	padding: 10px;
	background-color: paleturquoise;
	border: 1px #333 solid;
}
(b) 表示形式
子要素-1
子要素-2
子要素-3

(2) flex-direction: row-reverse;

(a) ソースコード
ソースコード表示

HTML


<div class="flex-s-01" style="flex-direction: row-reverse;">
	<div>子要素-1</div>
	<div>子要素-2</div>
	<div>子要素-3</div>
</div>

CSS


.flex-s-01 {
	display: flex;
	padding: 10px;
	background-color: pink;
	border: 1px #333 solid;
}
.flex-s-01 div {
	padding: 10px;
	background-color: paleturquoise;
	border: 1px #333 solid;
}
(b) 表示形式
子要素-1
子要素-2
子要素-3

(3) flex-direction: column;

(a) ソースコード
ソースコード表示

HTML


<div class="flex-s-01" style="flex-direction: column;">
	<div>子要素-1</div>
	<div>子要素-2</div>
	<div>子要素-3</div>
</div>

CSS


.flex-s-01 {
	display: flex;
	padding: 10px;
	background-color: pink;
	border: 1px #333 solid;
}
.flex-s-01 div {
	padding: 10px;
	background-color: paleturquoise;
	border: 1px #333 solid;
}
(b) 表示形式
子要素-1
子要素-2
子要素-3

(4) flex-direction: column-reverse;

(a) ソースコード
ソースコード表示

HTML


<div class="flex-s-01 lf" style="flex-direction: column-reverse;">
	<div>子要素-1</div>
	<div>子要素-2</div>
	<div>子要素-3</div>
</div>

CSS


.flex-s-01 {
	display: flex;
	padding: 10px;
	background-color: pink;
	border: 1px #333 solid;
}
.flex-s-01 div {
	padding: 10px;
	background-color: paleturquoise;
	border: 1px #333 solid;
}
(b) 表示形式
子要素-1
子要素-2
子要素-3

L8.3.3 flex-wrap（Flex アイテム折り返し）

flex-wrap: （Flex アイテム折り返し）;

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

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

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

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

(a) ソースコード
ソースコード表示

HTML


<div class="flex-s-01" style="flex-wrap: nowrap;">
	<div>子要素-1</div>
	<div>子要素-2</div>
	<div>子要素-3</div>
	<div>子要素-4</div>
	<div>子要素-5</div>
	<div>子要素-6</div>
	<div>子要素-7</div>
	<div>子要素-8</div>
	<div>子要素-9</div>
	<div>子要素-10</div>
	<div>子要素-11</div>
	<div>子要素-12</div>
</div>

CSS


.flex-s-01 {
	display: flex;
	padding: 10px;
	background-color: pink;
	border: 1px #333 solid;
}
.flex-s-01 div {
	padding: 10px;
	background-color: paleturquoise;
	border: 1px #333 solid;
}
(b) 表示形式
子要素-1
子要素-2
子要素-3
子要素-4
子要素-5
子要素-6
子要素-7
子要素-8
子要素-9
子要素-10
子要素-11
子要素-12

(2) flex-wrap: wrap;

(a) ソースコード
ソースコード表示

HTML


<div class="flex-s-01" style="flex-wrap: wrap;">
	<div>子要素-1</div>
	<div>子要素-2</div>
	<div>子要素-3</div>
	<div>子要素-4</div>
	<div>子要素-5</div>
	<div>子要素-6</div>
	<div>子要素-7</div>
	<div>子要素-8</div>
	<div>子要素-9</div>
	<div>子要素-10</div>
	<div>子要素-11</div>
	<div>子要素-12</div>
</div>

CSS


.flex-s-01 {
	display: flex;
	padding: 10px;
	background-color: pink;
	border: 1px #333 solid;
}
.flex-s-01 div {
	padding: 10px;
	background-color: paleturquoise;
	border: 1px #333 solid;
}
(b) 表示形式
子要素-1
子要素-2
子要素-3
子要素-4
子要素-5
子要素-6
子要素-7
子要素-8
子要素-9
子要素-10
子要素-11
子要素-12

(3) flex-wrap: wrap-reverse;

(a) ソースコード
ソースコード表示

HTML


<div class="flex-s-01" style="flex-wrap: wrap-reverse;">
	<div>子要素-1</div>
	<div>子要素-2</div>
	<div>子要素-3</div>
	<div>子要素-4</div>
	<div>子要素-5</div>
	<div>子要素-6</div>
	<div>子要素-7</div>
	<div>子要素-8</div>
	<div>子要素-9</div>
	<div>子要素-10</div>
	<div>子要素-11</div>
	<div>子要素-12</div>
</div>

CSS


.flex-s-01 {
	display: flex;
	padding: 10px;
	background-color: pink;
	border: 1px #333 solid;
}
.flex-s-01 div {
	padding: 10px;
	background-color: paleturquoise;
	border: 1px #333 solid;
}
(b) 表示形式
子要素-1
子要素-2
子要素-3
子要素-4
子要素-5
子要素-6
子要素-7
子要素-8
子要素-9
子要素-10
子要素-11
子要素-12

L8.3.4 flex-flow（Flex アイテム並び・折り返し一括指定）

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

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

(1) flex-flow: row-reverse wrap;

(a) ソースコード
ソースコード表示

HTML


<div class="flex-s-01" style="flex-flow: row-reverse wrap;">
	<div>子要素-1</div>
	<div>子要素-2</div>
	<div>子要素-3</div>
	<div>子要素-4</div>
	<div>子要素-5</div>
	<div>子要素-6</div>
	<div>子要素-7</div>
	<div>子要素-8</div>
	<div>子要素-9</div>
	<div>子要素-10</div>
	<div>子要素-11</div>
	<div>子要素-12</div>
</div>

CSS


.flex-s-01 {
	display: flex;
	padding: 10px;
	background-color: pink;
	border: 1px #333 solid;
}
.flex-s-01 div {
	padding: 10px;
	background-color: paleturquoise;
	border: 1px #333 solid;
}
(b) 表示形式
子要素-1
子要素-2
子要素-3
子要素-4
子要素-5
子要素-6
子要素-7
子要素-8
子要素-9
子要素-10
子要素-11
子要素-12

L8.3.5 justify-content（Flex アイテム水平位置）

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

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

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

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

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

(a) ソースコード
ソースコード表示

HTML


<div class="flex-s-01" style="justify-content: flex-start;">
	<div>子要素-1</div>
	<div>子要素-2</div>
	<div>子要素-3</div>
	<div>子要素-4</div>
</div>

CSS


.flex-s-01 {
	display: flex;
	padding: 10px;
	background-color: pink;
	border: 1px #333 solid;
}
.flex-s-01 div {
	padding: 10px;
	background-color: paleturquoise;
	border: 1px #333 solid;
}
(b) 表示形式
子要素-1
子要素-2
子要素-3
子要素-4

(2) justify-content: flex-end;

(a) ソースコード
ソースコード表示

HTML


<div class="flex-s-01" style="justify-content: flex-end;">
	<div>子要素-1</div>
	<div>子要素-2</div>
	<div>子要素-3</div>
	<div>子要素-4</div>
</div>

CSS


.flex-s-01 {
	display: flex;
	padding: 10px;
	background-color: pink;
	border: 1px #333 solid;
}
.flex-s-01 div {
	padding: 10px;
	background-color: paleturquoise;
	border: 1px #333 solid;
}
(b) 表示形式
子要素-1
子要素-2
子要素-3
子要素-4

(3) justify-content: center;

(a) ソースコード
ソースコード表示

HTML


<div class="flex-s-01" style="justify-content: center;">
	<div>子要素-1</div>
	<div>子要素-2</div>
	<div>子要素-3</div>
	<div>子要素-4</div>
</div>

CSS


.flex-s-01 {
	display: flex;
	padding: 10px;
	background-color: pink;
	border: 1px #333 solid;
}
.flex-s-01 div {
	padding: 10px;
	background-color: paleturquoise;
	border: 1px #333 solid;
}
(b) 表示形式
子要素-1
子要素-2
子要素-3
子要素-4

(4) justify-content: space-between;

(a) ソースコード
ソースコード表示

HTML


<div class="flex-s-01" style="justify-content: space-between;">
	<div>子要素-1</div>
	<div>子要素-2</div>
	<div>子要素-3</div>
	<div>子要素-4</div>
</div>

CSS


.flex-s-01 {
	display: flex;
	padding: 10px;
	background-color: pink;
	border: 1px #333 solid;
}
.flex-s-01 div {
	padding: 10px;
	background-color: paleturquoise;
	border: 1px #333 solid;
}
(b) 表示形式
子要素-1
子要素-2
子要素-3
子要素-4

(5) justify-content: space-around;

(a) ソースコード
ソースコード表示

HTML


<div class="flex-s-01" style="justify-content: space-around;">
	<div>子要素-1</div>
	<div>子要素-2</div>
	<div>子要素-3</div>
	<div>子要素-4</div>
</div>

CSS


.flex-s-01 {
	display: flex;
	padding: 10px;
	background-color: pink;
	border: 1px #333 solid;
}
.flex-s-01 div {
	padding: 10px;
	background-color: paleturquoise;
	border: 1px #333 solid;
}
(b) 表示形式
子要素-1
子要素-2
子要素-3
子要素-4

L8.3.6 align-items（Flex アイテム垂直位置）

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

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

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

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

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

(a) ソースコード
ソースコード表示

HTML


<p>親要素：height: 200px;</p>
<p>子要素-1：font-size: 20px;</p>
<p>子要素-2：font-size: 30px;</p>
<p class="lf">子要素-3：font-size: 40px;</p>
<div class="flex-s-01" style="height: 200px; align-items: stretch;">
	<div style="font-size: 20px;">子要素-1</div>
	<div style="font-size: 30px;">子要素-2</div>
	<div style="font-size: 40px;">子要素-3</div>
</div>

CSS


.lf {
	margin-bottom: 16px;
}
.flex-s-01 {
	display: flex;
	padding: 10px;
	background-color: pink;
	border: 1px #333 solid;
}
.flex-s-01 div {
	padding: 10px;
	background-color: paleturquoise;
	border: 1px #333 solid;
}
(b) 表示形式

親要素：height: 200px;

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

子要素-2：font-size: 30px;

子要素-3：font-size: 40px;

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

(2) align-items: flex-start;

(a) ソースコード
ソースコード表示

HTML


<p>親要素：height: 200px;</p>
<p>子要素-1：font-size: 20px;</p>
<p>子要素-2：font-size: 30px;</p>
<p class="lf">子要素-3：font-size: 40px;</p>
<div class="flex-s-01" style="height: 200px; align-items: flex-start;">
	<div style="font-size: 20px;">子要素-1</div>
	<div style="font-size: 30px;">子要素-2</div>
	<div style="font-size: 40px;">子要素-3</div>
</div>

CSS


.lf {
	margin-bottom: 16px;
}
.flex-s-01 {
	display: flex;
	padding: 10px;
	background-color: pink;
	border: 1px #333 solid;
}
.flex-s-01 div {
	padding: 10px;
	background-color: paleturquoise;
	border: 1px #333 solid;
}
(b) 表示形式

親要素：height: 200px;

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

子要素-2：font-size: 30px;

子要素-3：font-size: 40px;

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

(3) align-items: flex-end;

(a) ソースコード
ソースコード表示

HTML


<p>親要素：height: 200px;</p>
<p>子要素-1：font-size: 20px;</p>
<p>子要素-2：font-size: 30px;</p>
<p class="lf">子要素-3：font-size: 40px;</p>
<div class="flex-s-01" style="height: 200px; align-items: flex-end;">
	<div style="font-size: 20px;">子要素-1</div>
	<div style="font-size: 30px;">子要素-2</div>
	<div style="font-size: 40px;">子要素-3</div>
</div>

CSS


.lf {
	margin-bottom: 16px;
}
.flex-s-01 {
	display: flex;
	padding: 10px;
	background-color: pink;
	border: 1px #333 solid;
}
.flex-s-01 div {
	padding: 10px;
	background-color: paleturquoise;
	border: 1px #333 solid;
}
(b) 表示形式

親要素：height: 200px;

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

子要素-2：font-size: 30px;

子要素-3：font-size: 40px;

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

(4) align-items: center;

(a) ソースコード
ソースコード表示

HTML


<p>親要素：height: 200px;</p>
<p>子要素-1：font-size: 20px;</p>
<p>子要素-2：font-size: 30px;</p>
<p class="lf">子要素-3：font-size: 40px;</p>
<div class="flex-s-01" style="height: 200px; align-items: center;">
	<div style="font-size: 20px;">子要素-1</div>
	<div style="font-size: 30px;">子要素-2</div>
	<div style="font-size: 40px;">子要素-3</div>
</div>

CSS


.lf {
	margin-bottom: 16px;
}
.flex-s-01 {
	display: flex;
	padding: 10px;
	background-color: pink;
	border: 1px #333 solid;
}
.flex-s-01 div {
	padding: 10px;
	background-color: paleturquoise;
	border: 1px #333 solid;
}
(b) 表示形式

親要素：height: 200px;

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

子要素-2：font-size: 30px;

子要素-3：font-size: 40px;

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

(5) align-items: baseline;

(a) ソースコード
ソースコード表示

HTML


<p>親要素：height: 200px;</p>
<p>子要素-1：font-size: 20px;</p>
<p>子要素-2：font-size: 30px;</p>
<p class="lf">子要素-3：font-size: 40px;</p>
<div class="flex-s-01" style="height: 200px; align-items: baseline;">
	<div style="font-size: 20px;">子要素-1</div>
	<div style="font-size: 30px;">子要素-2</div>
	<div style="font-size: 40px;">子要素-3</div>
</div>

CSS


.lf {
	margin-bottom: 16px;
}
.flex-s-01 {
	display: flex;
	padding: 10px;
	background-color: pink;
	border: 1px #333 solid;
}
.flex-s-01 div {
	padding: 10px;
	background-color: paleturquoise;
	border: 1px #333 solid;
}
(b) 表示形式

親要素：height: 200px;

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

子要素-2：font-size: 30px;

子要素-3：font-size: 40px;

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

L8.3.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 アイテム行が均等に間隔を空けて配置します。

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

(a) ソースコード
ソースコード表示

HTML


<p class="lf">親要素：flex-wrap: wrap; height: 250px;（幅狭時：height: 250px;）</p>
<div class="flex-s-03" style="height: 250px; align-content: stretch;">
	<div>子要素-1</div>
	<div>子要素-2</div>
	<div>子要素-3</div>
	<div>子要素-4</div>
	<div>子要素-5</div>
	<div>子要素-6</div>
	<div>子要素-7</div>
	<div>子要素-8</div>
	<div>子要素-9</div>
	<div>子要素-10</div>
	<div>子要素-11</div>
	<div>子要素-12</div>
	<div>子要素-13</div>
	<div>子要素-14</div>
</div>

CSS


.lf {
	margin-bottom: 16px;
}
.flex-s-03 {
	display: flex;
	flex-wrap: wrap;
	padding: 10px;
	height: 250px;
	background-color: pink;
	border: 1px #333 solid;
}
@media screen and (max-width: 760px) {
	.flex-s-03 {
		height: 500px;
	}
}
.flex-s-03 div {
	padding: 10px;
	background-color: paleturquoise;
	border: 1px #333 solid;
}
(b) 表示形式

親要素：flex-wrap: wrap; height: 250px;（幅狭時：height: 500px;）

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

(2) align-content: flex-start;

(a) ソースコード
ソースコード表示

HTML


<p class="lf">親要素：flex-wrap: wrap; height: 250px;（幅狭時：height: 500px;）</p>
<div class="flex-s-03" style="align-content: flex-start;">
	<div>子要素-1</div>
	<div>子要素-2</div>
	<div>子要素-3</div>
	<div>子要素-4</div>
	<div>子要素-5</div>
	<div>子要素-6</div>
	<div>子要素-7</div>
	<div>子要素-8</div>
	<div>子要素-9</div>
	<div>子要素-10</div>
	<div>子要素-11</div>
	<div>子要素-12</div>
	<div>子要素-13</div>
	<div>子要素-14</div>
</div>

CSS


.lf {
	margin-bottom: 16px;
}
.flex-s-03 {
	display: flex;
	flex-wrap: wrap;
	padding: 10px;
	height: 250px;
	background-color: pink;
	border: 1px #333 solid;
}
@media screen and (max-width: 760px) {
	.flex-s-03 {
		height: 500px;
	}
}
.flex-s-03 div {
	padding: 10px;
	background-color: paleturquoise;
	border: 1px #333 solid;
}
(b) 表示形式

親要素：flex-wrap: wrap; height: 250px;（幅狭時：height: 500px;）

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

(3) align-content: flex-end;

(a) ソースコード
ソースコード表示

HTML


<p class="lf">親要素：flex-wrap: wrap; height: 250px;（幅狭時：height: 500px;）</p>
<div class="flex-s-03" style="align-content: flex-end;">
	<div>子要素-1</div>
	<div>子要素-2</div>
	<div>子要素-3</div>
	<div>子要素-4</div>
	<div>子要素-5</div>
	<div>子要素-6</div>
	<div>子要素-7</div>
	<div>子要素-8</div>
	<div>子要素-9</div>
	<div>子要素-10</div>
	<div>子要素-11</div>
	<div>子要素-12</div>
	<div>子要素-13</div>
	<div>子要素-14</div>
</div>

CSS


.lf {
	margin-bottom: 16px;
}
.flex-s-03 {
	display: flex;
	flex-wrap: wrap;
	padding: 10px;
	height: 250px;
	background-color: pink;
	border: 1px #333 solid;
}
@media screen and (max-width: 760px) {
	.flex-s-03 {
		height: 500px;
	}
}
.flex-s-03 div {
	padding: 10px;
	background-color: paleturquoise;
	border: 1px #333 solid;
}
(b) 表示形式

親要素：flex-wrap: wrap; height: 250px;（幅狭時：height: 500px;）

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

(4) align-content: center;

(a) ソースコード
ソースコード表示

HTML


<p class="lf">親要素：flex-wrap: wrap; height: 250px;（幅狭時：height: 500px;）</p>
<div class="flex-s-03" style="align-content: flex-end;">
	<div>子要素-1</div>
	<div>子要素-2</div>
	<div>子要素-3</div>
	<div>子要素-4</div>
	<div>子要素-5</div>
	<div>子要素-6</div>
	<div>子要素-7</div>
	<div>子要素-8</div>
	<div>子要素-9</div>
	<div>子要素-10</div>
	<div>子要素-11</div>
	<div>子要素-12</div>
	<div>子要素-13</div>
	<div>子要素-14</div>
</div>

CSS


.lf {
	margin-bottom: 16px;
}
.flex-s-03 {
	display: flex;
	flex-wrap: wrap;
	padding: 10px;
	height: 250px;
	background-color: pink;
	border: 1px #333 solid;
}
@media screen and (max-width: 760px) {
	.flex-s-03 {
		height: 500px;
	}
}
.flex-s-03 div {
	padding: 10px;
	background-color: paleturquoise;
	border: 1px #333 solid;
}
(b) 表示形式

親要素：flex-wrap: wrap; height: 250px;（幅狭時：height: 500px;）

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

(5) align-content: space-between;

(a) ソースコード
ソースコード表示

HTML


<p class="lf">親要素：flex-wrap: wrap; height: 250px;（幅狭時：height: 500px;）</p>
<div class="flex-s-03" style="align-content: space-between;">
	<div>子要素-1</div>
	<div>子要素-2</div>
	<div>子要素-3</div>
	<div>子要素-4</div>
	<div>子要素-5</div>
	<div>子要素-6</div>
	<div>子要素-7</div>
	<div>子要素-8</div>
	<div>子要素-9</div>
	<div>子要素-10</div>
	<div>子要素-11</div>
	<div>子要素-12</div>
	<div>子要素-13</div>
	<div>子要素-14</div>
</div>

CSS


.lf {
	margin-bottom: 16px;
}
.flex-s-03 {
	display: flex;
	flex-wrap: wrap;
	padding: 10px;
	height: 250px;
	background-color: pink;
	border: 1px #333 solid;
}
@media screen and (max-width: 760px) {
	.flex-s-03 {
		height: 500px;
	}
}
.flex-s-03 div {
	padding: 10px;
	background-color: paleturquoise;
	border: 1px #333 solid;
}
(b) 表示形式

親要素：flex-wrap: wrap; height: 250px;（幅狭時：height: 500px;）

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

(6) align-content: space-around;

(a) ソースコード
ソースコード表示

HTML


<p class="lf">親要素：flex-wrap: wrap; height: 250px;（幅狭時：height: 500px;）</p>
<div class="flex-s-03" style="align-content: space-around;">
	<div>子要素-1</div>
	<div>子要素-2</div>
	<div>子要素-3</div>
	<div>子要素-4</div>
	<div>子要素-5</div>
	<div>子要素-6</div>
	<div>子要素-7</div>
	<div>子要素-8</div>
	<div>子要素-9</div>
	<div>子要素-10</div>
	<div>子要素-11</div>
	<div>子要素-12</div>
	<div>子要素-13</div>
	<div>子要素-14</div>
</div>

CSS


.lf {
	margin-bottom: 16px;
}
.flex-s-03 {
	display: flex;
	flex-wrap: wrap;
	padding: 10px;
	height: 250px;
	background-color: pink;
	border: 1px #333 solid;
}
@media screen and (max-width: 760px) {
	.flex-s-03 {
		height: 500px;
	}
}
.flex-s-03 div {
	padding: 10px;
	background-color: paleturquoise;
	border: 1px #333 solid;
}
(b) 表示形式

親要素：flex-wrap: wrap; height: 250px;（幅狭時：height: 500px;）

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

L8.4 Flex アイテム（子要素）に指定可能なプロパティ

L8.4.1 order（Flex アイテム並び順）

order: Flexアイテム並び順;

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

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

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

(1) order: （数値）;

(a) ソースコード
ソースコード表示

HTML


<p>子要素-1：order: 4;</p>
<p>子要素-2：order: 2;</p>
<p>子要素-3：order: 1;</p>
<p class="lf">子要素-4：order: 3;</p>
<div class="flex-s-01">
	<div style="order: 4;">子要素-1</div>
	<div style="order: 2;">子要素-2</div>
	<div style="order: 1;">子要素-3</div>
	<div style="order: 3;">子要素-4</div>
</div>

CSS


.lf {
	margin-bottom: 16px;
}
.flex-s-01 {
	display: flex;
	padding: 10px;
	background-color: pink;
	border: 1px #333 solid;
}
.flex-s-01 div {
	padding: 10px;
	background-color: paleturquoise;
	border: 1px #333 solid;
}
(b) 表示形式

子要素-1：order: 4;

子要素-2：order: 2;

子要素-3：order: 1;

子要素-4：order: 3;

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

L8.4.2 flex-grow（Flex アイテム伸び率） 

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

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

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

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

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

(a) ソースコード
ソースコード表示

HTML


<p class="lf">flex-grow指定なし</p>
<div class="flex-s-01 lf">
	<div>子要素-1</div>
	<div>子要素-2</div>
	<div>子要素-3</div>
	<div>子要素-4</div>
</div>
<p>子要素-1：flex-grow: 4;</p>
<p>子要素-2：flex-grow: 2;</p>
<p>子要素-3：flex-grow: 1;</p>
<p class="lf">子要素-4：flex-grow: 2;</p>
<div class="flex-s-01">
	<div style="flex-grow: 4;">子要素-1</div>
	<div style="flex-grow: 2;">子要素-2</div>
	<div style="flex-grow: 1;">子要素-3</div>
	<div style="flex-grow: 2;">子要素-4</div>
</div>

CSS


.lf {
	margin-bottom: 16px;
}
.flex-s-01 {
	display: flex;
	padding: 10px;
	background-color: pink;
	border: 1px #333 solid;
}
.flex-s-01 div {
	padding: 10px;
	background-color: paleturquoise;
	border: 1px #333 solid;
}
(b) 表示形式

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

L8.4.3 flex-shrink（Flex アイテム縮み率） 

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

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

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

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

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

(a) ソースコード
ソースコード表示

HTML


<p>子要素にwidth: 40%;を指定（40% × 4子要素 ＝ 160%）</p>
<p class="lf">flex-shrink指定なし</p>
<div class="flex-s-01 lf">
	<div style="width: 40%;">子要素-1</div>
	<div style="width: 40%;">子要素-2</div>
	<div style="width: 40%;">子要素-3</div>
	<div style="width: 40%;">子要素-4</div>
</div>
<p>子要素にwidth: 40%;を指定（40% × 4子要素 ＝ 160%）</p>
<p>子要素-1：flex-shrink: 4;</p>
<p>子要素-2：flex-shrink: 2;</p>
<p>子要素-3：flex-shrink: 1;</p>
<p class="lf">子要素-4：flex-shrink: 2;</p>
<div class="flex-s-01">
	<div style="width: 40%; flex-shrink: 4;">子要素-1</div>
	<div style="width: 40%; flex-shrink: 2;">子要素-2</div>
	<div style="width: 40%; flex-shrink: 1;">子要素-3</div>
	<div style="width: 40%; flex-shrink: 2;">子要素-4</div>
</div>

CSS


.lf {
	margin-bottom: 16px;
}
.flex-s-01 {
	display: flex;
	padding: 10px;
	background-color: pink;
	border: 1px #333 solid;
}
.flex-s-01 div {
	padding: 10px;
	background-color: paleturquoise;
	border: 1px #333 solid;
}
(b) 表示形式

子要素に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

L8.4.4 flex-basis（Flex アイテムベース幅） 

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

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

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

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

(1) flex-basis: （幅）;

(a) ソースコード
ソースコード表示

HTML


<p>子要素-1：flex-basis: 50%;</p>
<p>子要素-2：flex-basis: 20%;</p>
<p>子要素-3：flex-basis: 15%;</p>
<p class="lf">子要素-4：flex-basis: 15%;</p>
<div class="flex-s-01">
	<div style="flex-basis: 50%;">子要素-1</div>
	<div style="flex-basis: 20%;">子要素-2</div>
	<div style="flex-basis: 15%;">子要素-3</div>
	<div style="flex-basis: 15%;">子要素-4</div>
</div>

CSS


.lf {
	margin-bottom: 16px;
}
.flex-s-01 {
	display: flex;
	padding: 10px;
	background-color: pink;
	border: 1px #333 solid;
}
.flex-s-01 div {
	padding: 10px;
	background-color: paleturquoise;
	border: 1px #333 solid;
}
(b) 表示形式

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

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

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

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

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

L8.4.5 flex（Flex アイテム並び順・伸び率・縮み率一括指定） 

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

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

L8.4.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 アイテムをベースラインに合わせて配置します。

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

(a) ソースコード
ソースコード表示

HTML


<p>親要素：height: 200px;</p>
<p>子要素-1：align-self: auto;</p>
<p>子要素-2：align-self: stretch;</p>
<p>子要素-3：align-self: flex-start;</p>
<p>子要素-4：align-self: flex-end;</p>
<p>子要素-5：align-self: center;</p>
<p>子要素-6：align-self: baseline;</p>
<p class="lf">子要素-7：align-self: baseline; font-size: 200%;</p>
<div class="flex-s-01" style="height: 200px;">
	<div style="align-self: auto;">子要素-1</div>
	<div style="align-self: stretch;">子要素-2</div>
	<div style="align-self: flex-start;">子要素-3</div>
	<div style="align-self: flex-end;">子要素-4</div>
	<div style="align-self: center;">子要素-5</div>
	<div style="align-self: baseline;">子要素-6</div>
	<div style="align-self: baseline; font-size: 200%;">子要素-7</div>
</div>

CSS


.lf {
	margin-bottom: 16px;
}
.flex-s-01 {
	display: flex;
	padding: 10px;
	background-color: pink;
	border: 1px #333 solid;
}
.flex-s-01 div {
	padding: 10px;
	background-color: paleturquoise;
	border: 1px #333 solid;
}
(b) 表示形式

親要素：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

L8.5 注意事項

L8.5.1 フレックスレイアウトでの垂直方向の指定

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

L8.6 フレックスレイアウト作成例

L8.6.1 ワイヤーフレーム

ワイヤーフレーム

L8.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>Flexboxサンプル（濱屋）</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 {
	font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.container {
	max-width: 960px;
	width: 100%;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	padding: 10px;
	border: #fff 1px solid;
}
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>

L8.6.3 表示形式

ロケット本体
PAGE
TOP
ロケット炎