【2024年版】レイアウトを自在に！フレックスボックス完全版！

2024年4月26日

「フレックスボックス」とは？

「フレックスボックス(Flexbox)」は、CSSのレイアウト技術の一つであり、複雑なレイアウトを簡単かつ効率的に実現するために設計されています。

フレックスボックスを使用することで、要素の配置、サイズ調整、配列の順序変更などが、より柔軟に行えるようになります。

float(浮動配置)やポジショニング(絶対配置・相対配置)、テーブルレイアウトといった旧来の方法に比べ、コードが簡潔で直感的であるため、制作者が望むレイアウトを素早く簡単に実現できるのが大きなメリットです。

「CSSフレックスボックス」の概念と基本操作

「CSSフレックスボックス」は、主に「フレックスコンテナ」と「フレックスアイテム」の二つの概念で構成されます。

・フレックスコンテナ：
フレックスアイテムを含む親要素のことで、このコンテナに”display: flex;”を指定することによって、直下の子要素がフレックスアイテムとして振る舞うようになります。

・フレックスアイテム：
自動的にレイアウトの適用を受け、様々なプロパティを通じてその表示方法が制御されます。フレックスボックスを使う上での基本操作には、アイテムの並び替え、水平方向または垂直方向への配置、アイテム間の間隔設定などがあります。

「フレックスボックス」でできること

「フレックスボックス」を使用することで、柔軟なレイアウトが実現可能になります。具体的には、以下のレイアウトが実現可能です。

・アイテムを容易に中央揃えにしたり、異なるサイズのアイテムを均等に配置することができる。
・アイテムを縦や横に並べ替えたり、複数行にわたる配置を簡単に実現することができる。
・水平方向や垂直方向の配置を細かく調整できる。

これらの機能により、レスポンシブなデザインの実現にも役立ちます。Webページ上での様々なレイアウトパターンを、より直感的かつ効率的にデザインすることが可能になります。Webデザインを行う上で、よりデザイン性の高いWebページを制作できることは必須となります。

Webデザイナーの仕事内容に興味があるという方は、まずは以下の記事をご覧ください。

「フレックスボックス」の使い方

display: flex;の基本的な使い方

　CSSの「フレックスボックス」を使用するには、まずコンテナ要素に対して「display: flex;」というプロパティを指定します。

これにより、そのコンテナ内の子要素が「フレックスアイテム」として扱われ、横並びに配置されるようになります。このシンプルな設定だけで、従来の「float(浮動配置)」を用いたレイアウトと比較して、より直感的かつ柔軟に要素の配置を行うことができます。

.container {
  display: flex; /* ここに、必要なプロパティを追加する */
}

基本的には、このプロパティを指定するだけで全ての直下の子要素が「フレックスアイテム」として動作し、親要素の幅内で横並びに配置されます。

また、フレックスアイテム間の間隔や、要素の中央揃えといったレイアウトもCSSのプロパティを追加することで容易に実現が可能です。

子要素の具体的なレイアウトの実践については本記事で詳しく紹介します。

フレックスボックスについて、より詳しい内容を知りたいという方はこちらをご覧ください。

CSSドキュメント：
https://developer.mozilla.org/ja/docs/Learn/CSS/CSS_layout/Flexbox

「フレックスボックス」の細かな設定方法

　「フレックスボックス」では、さまざまなプロパティを利用することで細かなレイアウト設定が可能です。

例えば、以下のようなプロパティが挙げられます。

・「flex-direction」：
アイテムの並べる方向を「row(横並び)」「column(縦並び)」と自由に変更することができる。

・「justify-content」：
アイテムを水平方向にどのように配置するかを指定できる。中央揃えやスペース均等配分など、デザインに応じたレイアウトが容易に実現できる。垂直方向の配置に関しても、「align-items」プロパティにより、アイテムの高さに応じた揃え方を指定可能。

・「flex-wrap」：
柔軟性のあるレイアウトを実現するため、アイテムの折り返し設定を行うことができるほか、「flex-grow」や「flex-shrink」、「flex-basis」を使って、アイテムの伸縮や基本サイズを細かく調整することも可能。

　このように、「フレックスボックス」のプロパティを駆使することで、複雑なレイアウトも簡潔なコードで実現でき、Webページのデザイン性と作業効率の大幅な向上が期待できます。

フレックスボックスを活用したレイアウトの実践例

横並びレイアウトの作成

「フレックスボックス」を使用することで、HTML要素を簡単に横並びにすることができます。

このレイアウトは、Webデザインにおいて非常に一般的であり、従来はfloat(浮動配置)プロパティなどを駆使して実現していました。しかし、「フレックスボックス」を利用すると、親要素に「display: flex;」を指定するだけで子要素が横並びになります。

このシンプルな方法によって、コードの量を減らし、より直感的なレイアウト作業を可能となります。さらに、「justify-content」や「align-items」といった「フレックスボックス」のプロパティを使用することで、子要素の間隔を調整したり、中央寄せにするなどといった詳細な配置調整も容易に行えます。

flex-direction

flex-directionプロパティは、フレックスアイテム(子要素)の並ぶ方向を指定します。

.container {
  display: flex;
  flex-direction: row; /* 初期値。横並び */
}

他の値を指定することで、並び方を変更できます。

.container {
  display: flex;
  flex-direction: row-reverse; /* 横並び(右から左) */
  flex-direction: column; /* 縦並び(上から下) */
  flex-direction: column-reverse; /* 縦並び(下から上) */
}

flex-wrap

flex-wrapプロパティは、フレックスアイテムが親要素の範囲を超えた場合の折り返し方法を指定します。

.container {
  display: flex;
  flex-wrap: nowrap; /* 初期値。折り返しなし */
}

nowrap以外を指定すると折り返しが可能になります。

.container {
  display: flex;
  flex-wrap: nowrap; /* 初期値。折り返しなし */
  flex-wrap: wrap; /* 折り返して複数行に配置 */
  flex-wrap: wrap-reverse; /* 折り返して複数行に配置(逆順) */
}

gap

gapプロパティは、アイテム間に一定のスペースを設定するために使用されます。このプロパティは、行間（水平方向のスペース）および列間（垂直方向のスペース）の隙間を定義することができます。

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px; /* 全てのアイテム間に20pxのスペースを追加 */
}

この設定により、フレックスボックスコンテナ内の各アイテム間に水平および垂直方向に 20px の間隔が設けられます。flex-wrap プロパティが wrap に設定されている場合、アイテムが折り返し行に配置されたときにも、行間にギャップが適用されます。

flex-flow

flex-flowプロパティは、flex-directionとflex-wrapの短縮形です。2つの値をスペース区切りで指定できます。

.container {
  flex-flow: row wrap; /* 横並びで折り返す */
}

レイアウトの配置方法の指定

「justify-content」、「align-items」、「align-content」は、CSSの「フレックスボックス」レイアウトで使用される主要なプロパティです。

・「justify-content」：
フレックスアイテムの主軸(横方向)における配置方法を指定し、「flex-start」や「space-between」、「space-around」などの値が使用可能。

・「align-items」：
フレックスアイテムの交差軸(縦方向)における配置方法を指定し、「stretch」、「flex-start」、「center」、「baseline」などの値が使用可能。

・「align-content」：
フレックスアイテムを複数行に折り返した際の、行と行の間の配置方法を指定するプロパティで、「space-between」、「space-around」、「space-evenly」等の値が使用可能。

これらのプロパティを組み合わせることで、様々なレイアウトを柔軟に実現できます。

justify-content

justify-contentプロパティは、フレックスアイテムを主軸(flex-directionで指定した方向)に沿って配置する方法を指定します。

.container {
  display: flex;
  justify-content: flex-start; /* 初期値。主軸の先頭に配置 */
}

他の値を指定することで、配置場所を変更できます。

.container {
  display: flex;
  justify-content: flex-end; /* 主軸の末尾に配置 */
  justify-content: center; /* 主軸の中央に配置 */
  justify-content: space-between; /* 先頭と末尾のアイテムを端に配置し、残りを均等に間隔を開ける */
}

align-items

align-itemsプロパティは、フレックスアイテムを交差軸(主軸と垂直な軸)方向に配置する方法を指定します。

.container {
  display: flex;
  align-items: stretch; /* 初期値。アイテムを縦方向に引き伸ばす */
}

他の値を指定することで、配置場所を変更できます。

.container {
  display: flex;
  align-items: flex-start; /* 交差軸の先頭に配置 */
  align-items: flex-end; /* 交差軸の末尾に配置 */
  align-items: center; /* 交差軸の中央に配置 */
  align-items: baseline; /* アイテムの文字ベースラインに揃える */
}

align-content

align-contentプロパティは、フレックスラインの配置方法を指定します。複数行に折り返された場合に効果があります。

.container {
  display: flex;
  align-content: flex-start; /* 交差軸の先頭に配置 */
  align-content: flex-end; /* 交差軸の末尾に配置 */
  align-content: center; /* 交差軸の中央に配置 */
  align-content: space-between; /* 均等に間隔を開ける */
  align-content: space-around; /* 均等に間隔を開け、最初と最後のラインも余白を持つ */
}

フレックスアイテムの伸縮挙動を制御

「flex-grow」、「flex-shrink」と「flex-basis」は、CSSの「フレックスボックス」レイアウトにおいて、フレックスアイテムの伸縮挙動を制御するための重要なプロパティです。

・「flex-grow」：
フレックスアイテムの伸長比率を指定し、余剰空間をどのように分配するかを決めることができる。

・「flex-shrink」：
フレックスアイテムの縮小比率を指定し、空間が不足した際にどのようにアイテムを縮小させるかを決めることができる。

・「flex-basis」：
フレックスアイテムの初期サイズを指定し、伸縮が行われる前の基準となるサイズを決定することができる。

これらのプロパティを適切に組み合わせることで、フレックスアイテムの大きさと配置を細かく制御できます。

flex-grow

flex-growプロパティは、フレックスアイテムの伸長比率を指定します。数値が大きいほど、利用できる空間を多く確保できます。

.item {
  flex-grow: 0; /* 初期値。伸長しない */
}

.item:nth-child(2) {
  flex-grow: 1; /* 利用できる空間を1つ分確保する */
}

flex-shrink

flex-shrinkプロパティは、フレックスアイテムの縮小比率を指定します。数値が大きいほど、空間が足りない場合に縮小されやすくなります。

.container {
  display: flex;
}

.item {
  flex-shrink: 1; /* 初期値 */
}

.item:nth-child(2) {
  flex-shrink: 3; /* 他のアイテムの3倍の比率で縮小される */
}

上記の例では、.itemに対してflex-shrink: 1;が指定されています。これが初期値となります。

一方、2番目の.itemには、flex-shrink: 3;が指定されています。つまり、他のアイテムの3倍の比率で縮小されることになります。空間が足りない場合、2番目のアイテムが他より優先的に縮小されます。

flex-basis

flex-basisプロパティは、フレックスアイテムの初期の大きさを指定します。

.container {
  display: flex;
}

.item {
  flex-basis: 200px; /* 初期幅200px */
}

.item:nth-child(3) {
  flex-basis: 25%; /* 初期幅25% */
}

上記の例では、.itemに対してflex-basis: 200px;が指定されています。つまり、初期の幅が200pxに設定されます。

一方、3番目の.itemには、flex-basis: 25%;が指定されています。つまり、初期の幅が25%に設定されます。

flex-basisの値には、px、%、em、remなどの単位が使用できます。autoを指定した場合は、widthまたはheightのプロパティ値が適用されます。

flex

flexプロパティは、flex-grow、flex-shrinkとflex-basisの3つの値を1つの値で指定できる短縮形です。

.item {
  flex: 1 1 auto; /* flex-grow: 1, flex-shrink: 1, flex-basis: auto */
}

align-self

align-selfプロパティは、個別のフレックスアイテムの交差軸方向の配置を指定します。align-itemsプロパティの値と同じ値を指定できます。

.item {
  align-self: flex-start; /* 交差軸の先頭に配置 */
}

orderプロパティを用いた順序変更

「フレックスボックス」におけるもう一つの強力な機能は、「order」プロパティによる要素の順序変更です。

このプロパティを使用することで、HTMLの構造を変更することなく、要素の表示順序を自由に変更することができます。たとえば、レスポンシブデザインにおいて、画面サイズによって要素の優先度を変えたい場合などに非常に便利です。「order」プロパティに整数値を指定することで、フレックスアイテムの順序を制御し、HTMLのマークアップとは異なる表示順序を実現することができます。

この特徴により、デザインの変更や追加においても、より高い効率と柔軟性を持ったレイアウト設計が可能になります。

order

orderプロパティは、フレックスアイテムの順序を指定します。数値が小さいほど先に配置されます。

.item:nth-child(1) {
  order: 3; /* 3番目に配置される */
}

.item:nth-child(2) {
  order: 1; /* 1番目に配置される */
}

.item:nth-child(3) {
  order: 4; /* 4番目に配置される */
}

.item:nth-child(4) {
  order: 2; /* 2番目に配置される */
}

上記のように、order値を変更することで、フレックスアイテムの順序を自由に入れ替えることができます。デフォルトでは0が指定されており、数値が同じ場合は元の順序どおりに配置されます。

orderプロパティは、フレックスアイテムの視覚的な順序を変更するのに便利です。例えば、モバイル表示時にフレックスアイテムの順序を入れ替えたい場合などに活用できます。

/* デスクトップ表示 */
.item:nth-child(1) { order: 1; }
.item:nth-child(2) { order: 2; }
.item:nth-child(3) { order: 3; }

/* モバイル表示 */
@media (max-width: 600px) {
  .item:nth-child(1) { order: 2; }
  .item:nth-child(2) { order: 3; }
  .item:nth-child(3) { order: 1; }
}

このように、orderプロパティを使うことで、フレックスアイテムの順序を動的に変更することができ、レスポンシブデザインの実現に役立ちます。

「フレックスボックス」の注意点とポイント

「フレックスボックス」の使い方を理解する

「フレックスボックス」を使用するには、まず基本的な構成を理解することが重要です。

「フレックスボックス」は、レイアウトを適用したい子要素とそれらを包含する親要素のコンテナからなります。
コンテナに”display: flex;”を追加することで、「フレックスボックス」が有効になります。このプロパティを利用することで、子要素を柔軟に配置し、アイテム間の隙間や並び順、サイズ調整が容易になります。

「フレックスボックス」の機能を最大限に利用するためには、主軸と交差軸の概念を把握し、適切なプロパティを適用することが必要です。

主軸は要素が並べられる方向を指し、交差軸はそれに垂直な方向を指します。これらの軸に沿って、「justify-content」や「align-items」などのプロパティを使用することで、レイアウトの微調整が可能になります。

まとめ

「フレックスボックス」でできること
様々なレイアウトを簡単に実装できます。例えば、アイテムを均等に配置したり、特定の要素だけを中央に寄せたり、複数行にわたるレイアウトを柔軟に制御することが可能です。さらに、”flex-wrap”プロパティの使用により、画面サイズに応じてアイテムの折り返しを自動で行うよう設定することもできます。

「フレックスボックス」の限界
複雑なグリッドレイアウトや深い階層を持つレイアウトを実現する場合は、「フレックスボックス」のみでは対応が難しいことがあります。また、古いブラウザでは「フレックスボックス」に対応していないため、Webサイトの互換性を重視する場合は注意が必要です。

　CSSの「フレックスボックス」は、コードを簡潔に保ちながらも、レイアウトの制作効率を大幅に向上させることができる強力なツールです。その機能と限界を正しく理解し、使い方を適切に選択して、効果的なレイアウト設計をしていきましょう！

WithCodeを体験できる初級コース公開中！

初級コース(¥49,800)が完全無料に！

期間：1週間
学習内容：
ロードマップ/基礎知識/環境構築/HTML/CSS/LP・ポートフォリオ作成
→ 正しい学習方法で「確かな成長」を実感できるカリキュラム。

副業・フリーランスが主流になっている今こそ、自らのスキルで稼げる人材を目指してみませんか？

未経験でも心配することありません。初級コースを受講される方の大多数はプログラミング未経験です。まずは無料カウンセリングで、悩みや不安をお聞かせください！

↓

公式サイトから無料カウンセリングに申し込む →

この記事を書いた人

WithCode 編集部

WithCode(ウィズコード)は「目指すなら稼げる人材」というコンセンプトを掲げ、累計300名以上の卒業生を輩出してきたプログラミングスクールです。Web制作・Webデザインに関する役立つ情報や有意義な情報を発信していきます。