前書き

この記事は、Flexboxの概念を明確に理解するためのガイドです。複雑な部分を簡潔に解説し、一度読むことでFlexboxを完全に理解できるようにしています。基本的な概念を把握する理想的な方法を提供し、忘れたときにすぐに参照できるように、最後にチートシートも提供しています。

この記事を読むことで、Flexboxの理解にかかる時間を大幅に短縮できるでしょう。ぜひ一読してみてください。

Flex Boxとは

Flex boxは、HTMLの要素を簡単に配置・整列するCSSの方法です。動的に中央寄せなどを扱うのに便利です。Youtubeの動画一覧のようにいい感じに要素を並べられます。
下の図のような時に使うイメージです。

Flex boxの用語を理解する

flexの学習では align-content, align-items, align-self, justify-content, justify-items, justify-self など、様々なプロパティーが存在します。
いきなりこれらを理解するのは難しいため、細かく分けた概念を基礎から解説していきます。
整列対象を表す言葉

• flex container: Flexboxレイアウトモデルの親要素で、子要素の配置、整列、サイズを制御します。

• items: flex containerの内部の子要素全て

• content: 1行のitemsのまとまり

• self: itemsの内の子要素の一つだけを対象とする時に利用する

軸の方向を表す言葉

• main軸(justify)

• cross軸(align)

次から、より詳細に各概念を説明してきます。
配置の方法

• center: 軸の中心に寄せる

• start: 軸の開始位置に寄せる

• end: 軸の終了位置に寄せる

• space-between: 余ったスペースを各要素の間に均等に配置

各要素の詳細な説明

Flex container, Content, Item

まず、FlexのBoxを構成するHTML要素を解説していきます。FlexのHTML要素となるものはContainer, Content, Itemの3つです。

Container

display: flex を付与する親要素です。この親要素にjustify-content, align-items などを付与することで内部の小要素の配置を制御します。
justify-content, align-items などについては、後ほど解説していきます。

Flex Content

図の紫で括ったFlex Container内部の行のまとまりの部分です。このContentは実際にHTML要素として存在する部分ではありませんが、仮想的に存在していると考えると理解がしやすくなります。

Contentの横幅

Contentの横幅はそれぞれの行のitemが全て収まる高さになります。

Contentの高さ

Contentの高さは内部の要素のうち一番高い要素の高さとなります。

Flex Item

Flex Containerの直下の子となる各要素です。図の1 ~ 9 の四角の部分です。

Flex Itemの幅

HTMLのblock要素は通常幅が100%なのですが、flex containerの内部ではデフォルトで横幅が小要素のサイズまで縮まるようになります。

Flex Itemの配置フロー

通常はHTMLのblox要素の次の要素は右側ではなく下に回り込むように配置されるのですが、flex containerの内部ではinline-block 要素と同じように右側に順番に並ぶようになります。
それにより、図のように1,2,3と横に並ぶようになります。

Self

"self"という言葉は、実際にHTMLやCSSなどのコードに存在する要素ではないですが、コードを説明する際に便利な概念です。例えば、"align-self"などのキーワードで使われることがありますが、これは要素自体を指します。

"align-items"との違いは、"align-items"プロパティは親要素であるflexコンテナに設定して、その内部の要素を一括で制御します。一方で、"align-self"は個々の子要素に直接設定し、それぞれの要素の挙動を個別に制御することができます。

例えば、特定の1つの子要素だけを異なる配置にしたい場合や、偶数と奇数の要素で配置を変えたい場合などに、"align-self"を活用できます。

Main軸(justify)とCross軸(align)