【基本編】CSSで横や縦の並びを指定できるフレックスボックス(flex)とは？使い方を詳しく解説！

【 2025/08/29 00:00 更新】

CSSのフレックスボックス（flex）とは？

フレックスボックス（flex）は、複数の要素を並べて表示させることができる要素です。

要素を横や縦に並べることができ、要素同士の間隔や配置を指定できるプロパティが用意されています。

〜フレックスボックスのイメージ〜

こじはなもWeb開発のときはflex重宝してる！

flexのコードはこんな感じ

CSSでdsplay: flex;と指定すると、フレックスボックスになります。

【 CSS 】


.flex {
    display: flex;
}

【 HTML 】


〜 フレックスボックス 〜
<div class="flex">
    <div>block01</div>
    <div>block02</div>
    <div>block03</div>
</div>
<br>
〜 普通のブロック要素 〜
<div>
    <div>block01</div>
    <div>block02</div>
    <div>block03</div>
</div>

ブラウザで実行するとこんな感じです。

フレックスボックス内のブロック要素が横並びになりましたね！

ブロック要素とは

ブロック要素は、Webページのまとまりやレイアウトの役割を果たす要素です。

〜ブロック要素のイメージ〜

〜ブロック要素の特徴〜

前後に改行が入る。
　→ ただし、親要素がフレックスボックスの場合、指定内容によっては改行されない。
横幅は、親の幅いっぱいに広がる。
　→ ただし、widthプロパティで指定した場合、その指定に従う。
ブロック用のCSSプロパティが使え、柔軟性が高くなる。
　→ プロパティ例：width、height、margin、padding

ブロック要素は、CSSでdisplay: block;と書くことで指定できます。

〜ブロック要素の指定方法〜

セレクタ {
　　　　display: block;
　　　　その他スタイル...
}

〜デフォルトがブロック要素となるタグ〜

h1〜h6タグ
pタグ
divタグ
sectionタグ
asideタグ
articleタグ
navタグ
ulタグ
olタグ
headerタグ
footerタグ
mainタグ
preタグ
dlタグ
dtタグ
ddタグ
formタグ
hrタグ

これらは、displayプロパティの指定によって変えることが可能です。

CSS
プロパティjustify-content｜主軸方向（デフォルトは水平）の配置

justify-content の使い方

justify-contentは、フレックスボックス内の要素に対して主軸方向の配置を指定できます。

主軸方向のデフォルトは水平方向です。
CSSでflex-direction: column;を指定することで主軸は垂直方向となります。

値には、center (中央寄せ)・flex-start (左寄せ)・flex-end (右寄せ)などが用意されています。

〜 justify-contentの書き方〜

セレクタ {
　　　　justify-content: 値;
　　　　その他スタイル...
}

〜 justify-contentの値の種類〜

center	フレックスボックス内の要素を中央へ寄せます。
flex-start	フレックスボックス内の要素を左へ寄せます。デフォルトの設定です。
flex-end	フレックスボックス内の要素を右へ寄せます。
space-between	フレックスボックス内の要素を等間隔に配置します。行の１番目と最後の要素は、一番端に配置されます。
space-evenly	フレックスボックス内の要素を等間隔に配置します。行の１番目と最後の要素は、端からスペースを空けて配置されます。端・要素間の余白は均等なサイズです。
space-around	フレックスボックス内の要素を等間隔に配置します。行の１番目と最後の要素は、端からスペースを空けて配置されます。要素間の余白は両端の余白の2倍のサイズです。

フレックスボックスのアイテム

フレックスボックス内の要素のことをアイテムと呼びます。

justify-content のコード例

【 CSS 】


.flex {
    display: flex;
}
.justify-center {
    justify-content: center;
    background-color: aqua;
}
.justify-start {
    justify-content: flex-start;
    background-color: aquamarine;
}
.justify-end {
    justify-content: flex-end;
    background-color: aqua;
}
.justify-between {
    justify-content: space-between;
    background-color: aquamarine;
}
.justify-evenly {
    justify-content: space-evenly;
    background-color: aqua;
}
.justify-around {
    justify-content: space-around;
    background-color: aquamarine;
}

【 HTML 】


<p>【中央】</p>
<div class="flex justify-center">
    <div>block01</div>
    <div>block02</div>
    <div>block03</div>
</div>
<p>【左】</p>
<div class="flex justify-start">
    <div>block01</div>
    <div>block02</div>
    <div>block03</div>
</div>
<p>【右】</p>
<div class="flex justify-end">
    <div>block01</div>
    <div>block02</div>
    <div>block03</div>
</div>
<p>【等間隔（両端スペースなし）】</p>
<div class="flex justify-between">
    <div>block01</div>
    <div>block02</div>
    <div>block03</div>
</div>
<p>【等間隔（両端スペースあり）】</p>
<div class="flex justify-evenly">
    <div>block01</div>
    <div>block02</div>
    <div>block03</div>
</div>
<p>【等間隔（両端スペースあり）】</p>
<div class="flex justify-around">
    <div>block01</div>
    <div>block02</div>
    <div>block03</div>
</div>

ブラウザで実行すると値によって様々な配置となりました！

CSS
プロパティalign-items｜交差軸（デフォルトは垂直）の配置

align-items の使い方

align-itemsは、フレックスボックス内の要素に対して交差軸方向の配置を指定できます。

交差軸のデフォルトは垂直方向です。
CSSでflex-direction: column;を指定することで交差軸は水平方向となります。

値には、center (中央寄せ)・flex-start (上寄せ)・flex-end (下寄せ)などが用意されています。

〜 align-itemsの書き方〜

セレクタ {
　　　　align-items: 値;
　　　　その他スタイル...
}

〜 align-itemsの値の種類〜

stretch	フレックスボックス内の要素で1番大きな要素の高さに揃います。デフォルトで設定されます。
center	フレックスボックス内の要素を垂直の中央へ揃えます。
flex-start	フレックスボックス内の要素を垂直の上へ揃えます。
flex-end	フレックスボックス内の要素を垂直の下へ揃えます。

フレックスボックスのアイテム

フレックスボックス内の要素のことをアイテムと呼びます。

align-items のコード例

【 CSS 】


/* flexボックス */
.flex {
    display: flex;
    height: 80px;
    background-color: aqua;
}
.items-stretch {
    align-items: stretch;
}
.items-center {
    align-items: center;
}
.items-start {
    align-items: flex-start;
}
.items-end {
    align-items: flex-end;
}

/* アイテム */
.block01 {
    background-color: pink;
}
.block02 {
    background-color: darkorange;
}
.block03 {
    background-color: beige;
}

【 HTML 】


<p>【一番高い要素の高さに合わせる】</p>
<div class="flex items-stretch">
    <div class="block01">block01</div>
    <div class="block02">block02</div>
    <div class="block03">block03</div>
</div>
<p>【中央】</p>
<div class="flex items-center">
    <div class="block01">block01</div>
    <div class="block02">block02</div>
    <div class="block03">block03</div>
</div>
<p>【上】</p>
<div class="flex items-start">
    <div class="block01">block01</div>
    <div class="block02">block02</div>
    <div class="block03">block03</div>
</div>
<p>【下】</p>
<div class="flex items-end">
    <div class="block01">block01</div>
    <div class="block02">block02</div>
    <div class="block03">block03</div>
</div>

ブラウザで実行すると値によって様々な配置となりました！

CSS
プロパティflex-wrap｜幅に合わせた折り返しの指定

flex-wrap の使い方

flex-wrapは、フレックスボックス内の要素がはみだす場合、はみだす分の要素を折り返すよう指定ができます。

値には、wrap (折り返す)・no-wrap (折り返さない)などが用意されています。

〜 flex-wrapの書き方〜

セレクタ {
　　　　flex-wrap: 値;
　　　　その他スタイル...
}

〜 align-itemsの値の種類〜

wrap	フレックスボックス内の要素がフレックスボックスの幅をはみ出すとき、要素を折り返す。
no-wrap	フレックスボックス内の要素がフレックスボックスの幅をはみ出しても、要素を折り返さない。デフォルトの設定。

flex-wrap のコード例

【 CSS 】


/* flexボックス */
.flex {
    display: flex;
    background-color: aqua;
}
.flex-wrap {
    flex-wrap: wrap;
}
.flex-nowrap {
    flex-wrap: nowrap;
}

/* アイテム */
.block01 {
    width: 300px;
    background-color: pink;
}
.block02 {
    background-color: darkorange;
}
.block03 {
    background-color: beige;
}

【 HTML 】


<p>【折り返す】</p>
<div class="flex flex-wrap">
    <div class="block01">block01</div>
    <div class="block02">block02</div>
    <div class="block03">block03</div>
</div>
<p>【折り返さない】</p>
<div class="flex flex-nowrap">
    <div class="block01">block01</div>
    <div class="block02">block02</div>
    <div class="block03">block03</div>
</div>

ブラウザで実行するとこんな感じ

CSS
プロパティgap・column-gap・row-gap｜要素同士の間隔を指定

gap・column-gap・row-gap の使い方

gap・column-gap・row-gapは、フレックスボックス内の要素同士の間隔を指定できます。

〜 column-gapとrow-gapのイメージ〜

〜 gap・column-gap・row-gapの違い〜

gap	横と縦方向両方の間隔を指定。
column-gap	横方向の間隔を指定。
row-gap	縦方向の間隔を指定。

ポイント

要素1つ1つに margin をつけるより、 gap でまとめて指定した方がプログラムの管理に適しています。

〜 gap・column-gap・row-gapの書き方〜

セレクタ {
　　　　gap: 値 (値2);
　　　　その他スタイル...
}
※ (値2)は任意です。

セレクタ {
　　　　column-gap: 値;
　　　　row-gap: 値;
　　　　その他スタイル...
}

〜 gap・column-gap・row-gapの値について〜

gap: 値;	フレックスボックス内の要素同士の縦横の間隔を一括で指定できます。
gap: 値1 値2;	フレックスボックス内の要素同士の間隔を、縦を値1、横を値2で指定できます。
column-gap: 値;	フレックスボックス内の要素同士の縦のみの間隔を一括で指定できます。
row-gap: 値;	フレックスボックス内の要素同士の横のみの間隔を一括で指定できます。

gapはグリッドにも使える？

gap はフレックスボックスだけでなくグリッドにも使えます。

グリッドとは、行・列形式のレイアウトを作成できる要素です。

〜グリッドのイメージ〜

〜グリッドの特徴〜

要素を「行（row）」と「列（column）」に並べることができる。
　→ grid-template-columnsプロパティで列、grid-template-rowsプロパティで行を定義する。
グリッド関連プロパティによって、子要素の配置や行/列のまたがりなども指定できる。
（ブロック要素と同様）前後に改行が入る。
　→ ただし、親要素がフレックスボックスの場合、指定内容によっては改行されない。
（ブロック要素と同様）横幅は、親の幅いっぱいに広がる。
　→ ただし、widthプロパティで指定した場合、その指定に従う。
（ブロック要素と同様）ブロック用のCSSプロパティが使え、柔軟性が高くなる。
　→ プロパティ例：width、height、margin、padding

〜グリッドの指定方法〜

セレクタ {
　　　　display: grid;
　　　　その他スタイル...
}

gap・column-gap・row-gap のコード例

【 CSSファイル】


.flex {
    display: flex;
    flex-wrap: wrap;
    background-color: aqua;
    width: 180px;
}
.gap-all {
    gap: 50px;
}
.gap-yx {
    gap: 50px 20px;
}
.gap-x {
    column-gap: 50px;
}
.gap-y {
    row-gap: 50px;
}

/* アイテム */
.block01 {
    background-color: pink;
}
.block02 {
    background-color: darkorange;
}
.block03 {
    background-color: beige;
}

【 HTML 】


<p>【一括 全方向50px】</p>
<div class="flex gap-all">
    <div class="block01">block01</div>
    <div class="block02">block02</div>
    <div class="block03">block03</div>
</div>
<p>【行50px・列20px】</p>
<div class="flex gap-yx">
    <div class="block01">block01</div>
    <div class="block02">block02</div>
    <div class="block03">block03</div>
</div>
<p>【列50px】</p>
<div class="flex gap-x">
    <div class="block01">block01</div>
    <div class="block02">block02</div>
    <div class="block03">block03</div>
</div>
<p>【行50px】</p>
<div class="flex gap-y">
    <div class="block01">block01</div>
    <div class="block02">block02</div>
    <div class="block03">block03</div>
</div>

ブラウザで実行するとこんな感じ

まとめ

フレックスボックス（flex）は複数の要素を並べて表示させることができる。
CSSのflexはブロック要素も横並びにでき、配置や並び順・間隔・幅を設定できる。
justify-content：フレックスボックス内の要素に対して主軸方向（デフォルトは水平方向）の配置を指定できる。
align-items：フレックスボックス内の要素に対して交差軸方向（デフォルトは垂直方向）の配置を指定できる。
flex-wrap：フレックスボックス内の要素がはみだす場合、はみだす分の要素を折り返すよう指定ができる。
gap・column-gap・row-gap：フレックスボックス内の要素同士の間隔を指定ができる。
gapは横と縦方向、column-gapは横方向、row-gapは縦方向の間隔を指定できる。

【 2025/08/29 00:00 更新】

こじはな

Webエンジニア3年目。

フロントからバックエンドまで幅広く経験や知識を発信します！

【基本編】CSSで横や縦の並びを指定できるフレックスボックス(flex)とは？使い方を詳しく解説！

CSSの フレックスボックス（flex）とは？

CSSの フレックスボックス（flex）とは？

flexのコードはこんな感じ

CSSプロパティjustify-content｜主軸方向（デフォルトは水平）の配置

justify-content の使い方

justify-content のコード例

CSSプロパティalign-items｜交差軸（デフォルトは垂直）の配置

align-items の使い方

align-items のコード例

CSSプロパティflex-wrap｜幅に合わせた折り返しの指定

flex-wrap の使い方

flex-wrap のコード例

CSSプロパティgap・column-gap・row-gap｜要素同士の間隔を指定

gap・column-gap・row-gap の使い方

gap・column-gap・row-gap のコード例

まとめ

CSSのフレックスボックス（flex）とは？

CSSのフレックスボックス（flex）とは？

CSS
プロパティjustify-content｜主軸方向（デフォルトは水平）の配置

CSS
プロパティalign-items｜交差軸（デフォルトは垂直）の配置

CSS
プロパティflex-wrap｜幅に合わせた折り返しの指定

CSS
プロパティgap・column-gap・row-gap｜要素同士の間隔を指定