WEBCRE8TOR.COM

まずはスマホ出席で出席登録を行ってください。
今回の4桁の認証コードは「　　　　」です。

どうしても覚えてほしい！フレックスボックス

今回はcssで「display: flex;」と指定したボックス「通称：フレックスボックス」に関して深掘り考察・解説したいと思います。まずは定義について考えていきましょう。

本日は以下のページを参考に解説を進めていきます。

CSS Flexboxの使い方をどこよりも詳しく解説！図解やサンプルもあり！ | 模写修行メディア

はじまりと終わり～〇〇から〇〇へ～

こちらはフレックスボックスに限ったことではありませんが、
初期値のみを指定したhtml・cssコーディングによってもたらされる表示は、
基本的に「左から始まり右に終わる」そして「上から始まり下に終わる」ことを覚えておいてください。

そして今回は「初期値」という言葉が頻繁に出てきますが「特に指定していない」状態を指します。
初期値と特定の指定による変化をよく確認してください。

フレックスボックスとは

フレックスボックスはレイアウトに特化したdisplayプロパティです。

「display: flex;」を指定したボックスを親として、
内包する子要素が単数もしくは複数存在する場合に真価を発揮し、
要素を横並びにレイアウト、かつ余白などの調整を簡単に行えるという特徴があります。

例えば以下のようなhtmlのコードがあったとしましょう。

html

<div class="flex-container"><!-- display: flex;を指定したフレックスコンテナ（親要素） -->
  <div class="flex-item">flex item</div><!-- flexアイテム（子要素） -->
  <div class="flex-item">flex item</div><!-- flexアイテム（子要素） -->
  <div class="flex-item">flex item</div><!-- flexアイテム（子要素） -->
</div>

このhtmlに対してcssは以下のように記述を行ったとします。

css

/* フレックスボックス（親要素） */
.flex-container {
  display: flex;
  ...
}

/* flexアイテム（子要素） */
.flex-item {
  ...
}

すると表示されるレイアウトは以下の画像のようになります。

これがフレックスボックスの基本形となります。
基本的に「display: flex;」を親要素：フレックスコンテナに指定するだけで、
子要素：フレックスアイテムが横並びになるレイアウトを実現できます。

この基本形から親要素と子要素それぞれにフレックスボックス用のcss指定を追加で行うことで、
様々なレイアウトを簡単に実現することが可能となります。

今回は親要素に指定するプロパティと値の書き方・使い方を詳しく解説していきますが、
基本的にフレックスボックスは親要素にのみ指定をしてもレイアウトを実現できるため、
子要素のプロパティは必要になった時に調べればよいというレベルであり、今後も紹介することはないかと思います。

なお以前「インライン要素も横並びになる」というお話はしましたが、
フレックスボックスはインライン要素とは違い、横幅と高さを保ってくれます。

フレックスボックスの原理「軸」

フレックスボックスのレイアウトを知るうえで前提になるのが「軸」という概念の理解です。
さらに軸にも「主軸」と「交差（クロス）軸」の2種類があります。
この概念は「内側・外側」や「囲う」「ブラウザ幅・コンテンツ幅」と同様の重要度になります。

今回は「軸」を元に解説を行っていきます。

主軸は「横」か「縦」か（使用プロパティ：flex-direction）

「主軸」は子要素の並ぶ方向を指しており「横方向」と「縦方向」のどちらかに決めます。
「主軸」をどちらかに決めたことで、自動的に「交差軸」が交差した方向に決まります。
なお「主軸」は「flex-direction」というプロパティで指定を行い、初期値は「横：row」です。

プロパティ・値の説明

プロパティ	指定の効果	値
flex-direction	フレックスコンテナの主軸の方向を指定	row（初期値）・row-reverse・ column・column-reverse

値に「row」もしくは「row-reverse」を指定すると「主軸」は横方向、「交差軸」は縦方向になり、
「column」もしくは「column-reverse」を指定すると「主軸」は縦方向、「交差軸」は横方向になります。

CSS：フレックスコンテナの主軸を横方向に並べる

/* 初期値：フレックスアイテムを左から右に並べる */
.flex-container {
  display: flex;
  flex-direction: row; /* 左から右に */
}

/* フレックスアイテムを右から左に並べる */
.flex-container {
  display: flex;
  flex-direction: row-reverse; /* 右から左に */
}

CSS：フレックスコンテナの主軸を縦方向に並べる

/* フレックスアイテムを上から下に並べる */
.flex-container {
  display: flex;
  flex-direction: column; /* 上から下に */
}

/* フレックスアイテムを下から上に並べる */
.flex-container {
  display: flex;
  flex-direction: column-reverse; /* 下から上に */
}

上記のそれぞれの値の挙動を見てみましょう。

flex-directionプロパティの値による挙動の違い
CSS Demo: flex-direction (mozilla.net)

フレックスアイテムを折り返すのか（使用プロパティ：flex-wrap）

フレックスボックスは「フレックスコンテナ」と「フレックスアイテム」の親子関係で成り立ちますが、主軸方向に描画されたフレックスアイテムが、フレックスコンテナの横幅や高さに収まりきらない場合のレイアウトは、アイテムを折り返して表示するかどうかがポイントになります。

折り返しの有無を「flex-wrap」というプロパティで指定を行い、初期値は「折り返さない：nowrap」です。

プロパティ・値の説明

プロパティ	指定の効果	値
flex-wrap	フレックスアイテムがフレックスコンテナの横幅や高さを超えたら折り返すかを指定	nowrap（初期値）・wrap・wrap-reverse

値に「nowrap」を指定すると折り返さずに縮小して表示し、
「wrap」を指定すると1行目に収まりきらない場合は続きを2行目から表示し、
「wrap-reverse」を指定すると「wrap」の表示を逆方向から再現します。

CSS：アイテムを折り返すのかどうか

/* 初期値：折り返さずに縮小して表示 */
.flex-container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

/* 折り返して表示 */
.flex-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

/* 折り返して逆方向から表示 */
.flex-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap-reverse;
}

上記のそれぞれの値の挙動を見てみましょう。
変化がなければブラウザウィンドウの横を縮めて見てください。

flex-wrapプロパティの値による挙動の違い
CSS Demo: flex-wrap(mozilla.net)

flex-directionとflex-wrapをまとめて指定（使用プロパティ：flex-flow）

上記「flex-direction」と「flex-wrap」は、
「flex-flow」という1つのプロパティでまとめて記述することができます。
こちらは記述例と値の挙動だけ見ておきましょう。

flex-flowプロパティの値による挙動の違い
CSS Demo: flex-flow(mozilla.net)

フレックスアイテムの主軸方向の揃え方を指定（使用プロパティ：justify-content）

「justify-content」はフレックスアイテムの主軸方向の揃え方を指定するもので、
フレックスアイテムをどこからどのように描画するのかを指定します。

おそらく「justify-content」プロパティはフレックスボックスのプロパティの中で最も難解で、
この「justify-content」を理解できるかどうかがひとつのラインになります。

プロパティ・値の説明

プロパティ	指定の効果	値
justify-content	フレックスアイテムの主軸方向の揃え方を指定	flex-start（初期値）・flex-end・center・space-between・space-around

値に「flex-start」を指定すると主軸起点に揃え、左端から配置され、
「flex-end」を指定すると主軸終点に揃え、右端から配置され、
「center」を指定すると主軸中央に揃え、中央から配置されます。

また「space-between」を指定すると主軸幅全体に揃え、余白をもって等間隔で配置され、
「space-around」を指定すると主軸幅全体に揃え、余白をもって等間隔かつ起点・終点との間にも間隔付きで配置されます。

なお「space-between」の指定で余白が発生しない場合はflex-startと同様の表示で、
「space-around」の指定で余白が発生しない場合はcenterと同様の表示になります。

CSS：フレックスアイテムの主軸方向の揃え方を指定

/* 初期値：主軸起点揃え・左端から配置 */
.flex-container {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
}

/* 主軸終点揃え・右端から配置 */
.flex-container {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-end;
}

/* 主軸中央揃え・中央から配置 */
.flex-container {
  display: flex;
  flex-flow: row wrap;
  justify-content: center
}

/* 主軸幅全体揃え・余白あり等間隔配置 */
.flex-container {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

/* 主軸幅全体揃え・余白あり等間隔配置・起点および終点との間に余白 */
.flex-container {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
}

上記のそれぞれの値の挙動を見てみましょう。

justify-contentプロパティの値による挙動の違い
CSS Demo: justify-content(mozilla.net)

フレックスアイテムの行内での交差軸方向の揃え方を指定（使用プロパティ：align-items）

「align-items」はフレックスアイテムの行内での交差軸方向の揃え方の指定です。

プロパティ・値の説明

プロパティ	指定の効果	値
align-items	フレックスアイテムの行内での交差軸方向の揃え方を指定	stretch（初期値）・flex-start・flex-end・center・baseline

値に「stretch」を指定するとアイテムどうしの高さを揃え、
「flex-start」を指定すると交差軸の上部（先頭）に揃え、
「flex-end」を指定すると交差軸の下部（末尾）に揃え、
「center」を指定すると交差軸の中央に揃え、
「baseline」を指定すると交差軸のベースラインに揃います。

CSS：フレックスアイテムの交差方向の揃え方を指定

/* 初期値：アイテムどうしの高さを揃える */
.flex-container {
  display: flex;
  flex-flow: row wrap;
  align-items: stretch;
}

/* 交差軸の上部（先頭）に揃える */
.flex-container {
  display: flex;
  flex-flow: row wrap;
  align-items: flex-start;
}

/* 交差軸の下部（末尾）に揃える */
.flex-container {
  display: flex;
  flex-flow: row wrap;
  align-items: flex-end;
}

/* 交差軸の中央に揃える */
.flex-container {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
}

/* 交差軸のベースラインに揃える */
.flex-container {
  display: flex;
  flex-flow: row wrap;
  align-items: baseline;
}

上記のそれぞれの値の挙動を見てみましょう。

align-itemsプロパティの値による挙動の違い
CSS Demo: align-items(mozilla.net)
※start・・・flex-start、end・・・flex-endです。

フレックスコンテナの枠全体の交差軸方向の揃え方を指定（使用プロパティ：align-content）

「justify-content」は主軸方向の揃え方の指定でしたが、
この「align-content」はフレックスコンテナの枠全体の交差軸方向の揃え方の指定です。
基本的に高さが固定の場合などに使用することがあります。
交差軸ならではの配置方法が出てきます。

また前述の「align-items」は非常によく似たプロパティですが、
「align-items」はコンテナ行内での整列方法の指定で、
「align-content」は内部の枠全体の整列方法の指定です。

参考：align-items と align-content の違い : CSS Tips | iPentec

プロパティ・値の説明

プロパティ	指定の効果	値
align-content	フレックスコンテナの枠全体の交差軸方向の揃え方を指定	stretch（初期値）・flex-start・flex-end・center・space-between・space-around

値に関しては「justify-content」と同様になるため割愛します。

CSS：フレックスコンテナの枠全体の交差軸方向の揃え方を指定

/* 初期値：フレックスコンテナの高さを全て埋めるように配置 */
.flex-container {
  display: flex;
  flex-flow: row wrap;
  align-content: stretch;
}

/* フレックスコンテナの枠内上部（先頭）に揃える */
.flex-container {
  display: flex;
  flex-flow: row wrap;
  align-content: flex-start;
}

/* フレックスコンテナの枠内下部（末尾）に揃える */
.flex-container {
  display: flex;
  flex-flow: row wrap;
  align-content: flex-end;
}

/* フレックスコンテナの枠内中央に揃える */
.flex-container {
  display: flex;
  flex-flow: row wrap;
  align-content: center;
}

/* フレックスコンテナの枠内の余った余白を均等配置 */
.flex-container {
  display: flex;
  flex-flow: row wrap;
  align-content: space-between;
}

/* フレックスコンテナの枠内の余った余白を均等配置：上下に余白あり */
.flex-container {
  display: flex;
  flex-flow: row wrap;
  align-content: space-around;
}

上記のそれぞれの値の挙動を見てみましょう。

align-contentプロパティの値による挙動の違い
CSS Demo: align-content(mozilla.net)
※start・・・flex-startです。

フレックスアイテム同士の余白を具体的数値で指定（使用プロパティ：gap）

「gap」はフレックスアイテム同士の余白を具体的な数値で指定することができます。
実案件では「gap」の使用頻度がかなり高く、<ul></ul>タグなどはほとんど「gap」の指定をしてます。

プロパティ・値の説明

プロパティ	指定の効果	値
gap	フレックスアイテム同士の余白を具体的数値で指定	数値

数値を1つだけ指定すると上下左右に、2つ指定すると上下・左右の余白になります。

CSS：フレックスアイテム同士の余白を具体的数値で指定

/* フレックスアイテムどうしの上下左右の余白を10pxに指定 */
.flex-container {
  display: flex;
  flex-flow: row wrap;
  gap: 10px;
}

/* フレックスアイテムどうしの上下の余白を20px、左右の余白を30pxに指定 */
.flex-container {
  display: flex;
  flex-flow: row wrap;
  gap: 20px 30px;
}

上記のそれぞれの値の挙動を見てみましょう。

gapプロパティの値による挙動の違い
CSS Demo: gap(mozilla.net)

Webサイトコーディング[EASY]
<main></main>タグのhtml・cssコーディング
<article></article>タグのhtml・cssコーディング

それでは今日のコーディングを始めていきましょう。
今回は以下の1件の記事の学習を行います。

Webサイトコーディング[EASY] 05 main・article編

次回は<section id=”profile”></section>タグのコーディング

今回はここまで。
次回は<section id=”profile”></section>タグのコーディングからを行い、
<section id=”blog”></section>タグのコーディングでLEVEL EASYの記述は完了、Webページの完成となります。