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

【 2025/09/04 00:00 更新】

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

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

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

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

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

本記事は上級編です。

【フレックスボックス（flex）基本編の記事】

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

こじはなNote

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
プロパティflex-direction｜主軸の方向・並び順の指定

flex-direction の使い方

flex-directionは、主軸の方向とフレックスボックス内の要素の並び順を指定できます。

値には、row (左から右)・row-reverse (右から左)・column (上から下)・column-reverse (下から上)などが用意されています。

デフォルトではflex-direction: row; (左から右)で、主軸が水平・交差軸が垂直の方向です。

ポイント

flex-direction: column;(上から下)またはflex-direction: column-reverse;(下から上)とした場合、主軸が垂直・交差軸が水平へ変化します。

〜 flex-directionの書き方〜

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

〜 flex-directionの値の種類〜

row	フレックスボックス内の要素を左から右の方向へ並ばせる。デフォルトの指定。主軸が水平、交差軸が垂直の方向となる。
row-reverse	フレックスボックス内の要素を右から左の方向へ並ばせる。主軸が水平、交差軸が垂直の方向となる。
column	フレックスボックス内の要素を垂直に上から下の方向へ並ばせる。主軸が垂直、交差軸が水平の方向となる。
column-reverse	フレックスボックス内の要素を垂直に下から上の方向へ並ばせる。主軸が垂直、交差軸が水平の方向となる。

flex-direction のコード例

【 CSS 】


.flex {
    display: flex;
    background-color: aqua;
}
.direction-row {
    flex-direction: row;
}
.direction-row-reverse {
    flex-direction: row-reverse;
}
.direction-column {
    flex-direction: column;
}
.direction-column-reverse {
    flex-direction: column-reverse;
}

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

【 HTML 】


<p>・主軸：水平<br>
    ・並び：左から右</p>

<div class="flex direction-row">
    <div class="block01">block01</div>
    <div class="block02">block02</div>
    <div class="block03">block03</div>
</div>

<p>・主軸：水平<br>
    ・並び：右から左</p>

<div class="flex direction-row-reverse">
    <div class="block01">block01</div>
    <div class="block02">block02</div>
    <div class="block03">block03</div>
</div>

<p>・主軸：垂直<br>
    ・並び：上から下</p>

<div class="flex direction-column">
    <div class="block01">block01</div>
    <div class="block02">block02</div>
    <div class="block03">block03</div>
</div>

<p>・主軸：垂直<br>
    ・並び：下から上</p>

<div class="flex direction-column-reverse">
    <div class="block01">block01</div>
    <div class="block02">block02</div>
    <div class="block03">block03</div>
</div>

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

CSS
プロパティflex-basis｜フレックスアイテムの主軸方向の幅に対する基準

flex-basis の使い方

〜 flex-basis のイメージ〜

flex-basisは、フレックスボックス内の要素に対して幅の基準を指定します。

また、幅の方向は主軸方向です。

後述するflex-grow、flex-shrink の基準として反映されます。

flex-basisに指定した幅は、必ずしも反映されるわけではありません。

flex-basisに指定した幅は絶対じゃない

後述するflex-grow、flex-shrinkの指定・他要素の状態によって幅は変化します。
本当の幅というよりは、基準や初期の幅と考えてください。

〜 flex-basisの書き方〜

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

〜 flex-basisの値の種類〜

flex-basis: 任意のサイズ;	基準の幅を任意のサイズで指定。値の例：100px、10rem、10emなど
flex-basis: auto;	基準の幅をブラウザが計算して指定。デフォルトの設定。
flex-basis: fit-content;	基準の幅をフレックスアイテムの中身の幅で指定。
flex-basis: content;	基準の幅をフレックスアイテムの中身を基にブラウザが計算して指定。

flex-basis のコード例

【 CSS 】


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

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

/* flex-basis */
.flex-basis-size {
    flex-basis: 80px;
}
.flex-basis-auto {
    flex-basis: auto;
}
.flex-basis-content {
    flex-basis: content;
}
.flex-basis-fit-content {
    flex-basis: fit-content;
}

【 HTML 】


<p>block01 → flex-basis: 80px;</p>

<div class="flex">
    <div class="block01 flex-basis-size">block01</div>
    <div class="block02">block02</div>
    <div class="block03">block03</div>
</div>

<p>block01 → flex-basis: auto;</p>
<p>(ブラウザが自動算出)</p>

<div class="flex">
    <div class="block01 flex-basis-auto">block01</div>
    <div class="block02">block02</div>
    <div class="block03">block03</div>
</div>

<p>block01 → flex-basis: content;</p>
<p>(中身を基に自動算出)</p>

<div class="flex">
    <div class="block01 flex-basis-content">block01</div>
    <div class="block02">block02</div>
    <div class="block03">block03</div>
</div>

<p>block01 → flex-basis: fit-content;</p>
<p>(中身の幅に合わせる)</p>

<div class="flex">
    <div class="block01 flex-basis-fit-content">block01</div>
    <div class="block02">block02</div>
    <div class="block03">block03</div>
</div>

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

CSS
プロパティflex-grow｜フレックスアイテムの主軸方向の幅に対する増分

flex-grow の使い方

〜 flex-grow のイメージ〜

flex-growは、フレックスボックス内の要素に対して幅の増分を指定します。

幅の方向は主軸方向です。

値は、0以上の数値を指定できます。

flex-basis に指定された値を基準に、flex-growに指定した値を目標として幅が拡大されます。

また、flex-growに指定した値分必ず拡大するわけではなく、他フレックスアイテムの余裕＋残りの余白があるだけ拡大します。

〜 flex-growの書き方〜

セレクタ {
　　　　flex-grow: 0以上の数値;
　　　　その他スタイル...
}
※ 0以上の数値は、任意の数値です。

flex-grow のコード例

【 CSS 】


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

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

/* flex-grow */
.flex-grow-0 {
    flex-grow: 0;
}
.flex-grow-1 {
    flex-grow: 1;
}
.flex-grow-2 {
    flex-grow: 2;
}

【 HTML 】


<p>block01 → flex-grow: 0;</p>

<div class="flex">
    <div class="block01 flex-grow-0">block01</div>
    <div class="block02">block02</div>
    <div class="block03">block03</div>
</div>

<p>block01 → flex-grow: 1;</p>

<div class="flex">
    <div class="block01 flex-grow-1">block01</div>
    <div class="block02">block02</div>
    <div class="block03">block03</div>
</div>

<p>block01 → flex-grow: 2;</p>

<div class="flex">
    <div class="block01 flex-grow-2">block01</div>
    <div class="block02">block02</div>
    <div class="block03">block03</div>
</div>

<p>block01 → flex-grow: 2;</p>
<p>block02 → flex-grow: 1;</p>

<div class="flex">
    <div class="block01 flex-grow-2">block01</div>
    <div class="block02 flex-grow-1">block02</div>
    <div class="block03">block03</div>
</div>

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

ポイント

flex-growは、必ずしも指定した値分拡大するわけではなく、他フレックスアイテムの状態にも影響される。

CSS
プロパティflex-shrink｜フレックスアイテムの主軸方向の幅に対する縮小量

flex-shrink の使い方

〜 flex-shrink のイメージ〜

flex-shrinkは、フレックスボックス内の要素に対して幅の縮小量を指定します。

幅の方向は主軸方向です。

値は、0以上の数値を指定でき、flex-shrink: 0;はフレックスアイテム自信を全く縮小させないという意味になります。

flex-basis に指定された値を基準に、flex-shrinkに指定した値を目標として幅が縮小されます。

また、flex-shrinkに指定した値分必ず縮小するわけではなく、フレックスアイテムの余裕があるだけ縮小します。

flex-shrinkの0と1以上の違い

flex-shrinkの値について、0 と 1以上では意味が少し異なります。

0　　　　：アイテム自信を全く縮小しない指定で、親要素をはみ出す可能性がある。
1（以上）：アイテム自信を縮小する指定で、親要素の中に収めます。

〜 flex-shrinkの書き方〜

セレクタ {
　　　　flex-shrink: 0以上の数値;
　　　　その他スタイル...
}
※ 0以上の数値は、任意の数値です。

flex-shrink のコード例

【 CSS 】


/* flexボックス */
.flex {
    display: flex;
    background-color: aqua;
    width: 300px;
}

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

/* flex-shrink */
.flex-shrink-0 {
    flex-shrink: 0;
}
.flex-shrink-1 {
    flex-shrink: 1;
}
.flex-shrink-2 {
    flex-shrink: 2;
}

【 HTML 】


<p>block01 → flex-shrink: 0;</p>

<div class="flex">
    <div class="block01 flex-shrink-0">block01</div>
    <div class="block02">block02</div>
    <div class="block03">block03</div>
</div>

<p>block01 → flex-shrink: 1;</p>

<div class="flex">
    <div class="block01 flex-shrink-1">block01</div>
    <div class="block02">block02</div>
    <div class="block03">block03</div>
</div>

<p>block01 → flex-shrink: 2;</p>

<div class="flex">
    <div class="block01 flex-shrink-2">block01</div>
    <div class="block02">block02</div>
    <div class="block03">block03</div>
</div>

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

ポイント1

flex-shrinkの必ずしも指定した値分縮小するわけではなく、他フレックスアイテムの状態にも影響される。

ポイント2

flex-shrinkの指定は、親要素がフレックスアイテムの幅の合計より小さい時に効果を発揮します。

CSS
プロパティflex｜flex-basis・flex-grow・flex-shrinkを一括指定

flex の使い方

プロパティ flex は、フレックスアイテムの幅を指定できるflex-basis・flex-grow・flex-shrinkを一括で指定できます。

〜プロパティ flex の書き方〜

セレクタ {
　　　　flex: 値1 値2 値3;
　　　　その他スタイル...
}
※ 値2と値3は、任意の指定です。指定しない場合もあります。

〜プロパティ flexの値の指定パターン〜

flex: 0以上の数値;	flex: flex-growの値; とされます。例：flex: 1;
flex: 任意のサイズ;	flex: flex-basis; とされます。例：flex: 100px;
flex: 0以上の数値 0以上の数値;	flex: flex-grow flex-shrink; とされます。例：flex: 1 0;
flex: 0以上の数値任意のサイズ;	flex: flex-grow flex-basis; とされます。例：flex: 1 100px;
flex: 0以上の数値 0以上の数値任意のサイズ;	flex: flex-grow flex-shrink flex-basis; とされます。例：flex: 1 0 100px;

flex-basis の指定方法によって挙動が違う！？

プロパティ flex を使うかによってフレックスアイテムの挙動が違う場合があります。

flex-basisのデフォルトはflex-basis: auto;です。

しかし、プロパティ flexを使うときflex-basisの値を指定しない場合、flex-basis: 0%;が自動で指定されます。

flex-basis・flex-grow・flex-shrinkの違い

flex-basis・flex-grow・flex-shrink は全てフレックスアイテムの幅に関するプロパティです。

幅の方向は主軸方向。

flex-basis	フレックスボックス内の要素に対して幅の基準を指定。 flex-grow、flex-shrink の基準となる。
flex-grow	フレックスボックス内の要素に対して幅の増分を指定。 flex-basis に指定された値を基準に、flex-grow に指定した値を目標として幅が拡大される。
flex-shrink	フレックスボックス内の要素に対して幅の縮小量を指定。 flex-basis に指定された値を基準に、flex-shrink に指定した値を目標として幅が縮小される。

flex-basis

フレックスボックス内の要素に対して幅の基準を指定。

flex-grow、flex-shrink の基準となる。

flex-grow

フレックスボックス内の要素に対して幅の増分を指定。

flex-basis に指定された値を基準に、flex-grow に指定した値を目標として幅が拡大される。

flex-shrink

フレックスボックス内の要素に対して幅の縮小量を指定。

flex-basis に指定された値を基準に、flex-shrink に指定した値を目標として幅が縮小される。

flex のコード例

【 CSS 】


/* flexボックス */
.flex {
    display: flex;
    background-color: aqua;
    width: 300px;
}

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

/* flex */
.flex-1 {
    flex: 1;
}
.flex-px {
    flex: 200px;
}
.flex-1-0 {
    flex: 1 0;
}
.flex-1-px {
    flex: 1 200px;
}
.flex-1-0-px {
    flex: 1 0 200px;
}

【 HTML 】


<p>block01 → flex: 1;
    <br>(flex-grow:1)</p>

<div class="flex">
    <div class="block01 flex-1">block01</div>
    <div class="block02">block02</div>
    <div class="block03">block03</div>
</div>

<p>block01 → flex: 200px;
    <br>(flex-basis:200px)</p>

<div class="flex">
    <div class="block01 flex-px">block01</div>
    <div class="block02">block02</div>
    <div class="block03">block03</div>
</div>

<p>block01 → flex: 1 0;
    <br>(flex-grow:1・flex-shrink:0)</p>

<div class="flex">
    <div class="block01 flex-1-0">block01</div>
    <div class="block02">block02</div>
    <div class="block03">block03</div>
</div>

<p>block01 → flex: 1 200px;
    <br>(flex-grow:1・flex-basis:200px)</p>

<div class="flex">
    <div class="block01 flex-1-px">block01</div>
    <div class="block02">block02</div>
    <div class="block03">block03</div>
</div>

<p>block01 → flex: 1 0 200px;
    <br>(flex-grow:1・flex-shrink:0・flex-basis:200px)</p>

<div class="flex">
    <div class="block01 flex-1-0-px">block01</div>
    <div class="block02">block02</div>
    <div class="block03">block03</div>
</div>

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

まとめ

フレックスボックス（flex）は複数の要素を並べて表示させることができる。
CSSのflexはブロック要素も横並びにでき、配置や並び順・間隔・幅を設定できる。
flex-direction：主軸の方向とフレックスボックス内の要素の並び順を指定できる。
flex-basis：フレックスボックス内の要素に対して幅の基準を指定。flex-grow、flex-shrink の基準となる。
flex-grow：フレックスボックス内の要素に対して幅の増分を指定。flex-basis に指定された値を基準に、flex-grow に指定した値を目標として幅が拡大される。
flex-shrink：フレックスボックス内の要素に対して幅の縮小量を指定。flex-basis に指定された値を基準に、flex-shrink に指定した値を目標として幅が縮小される。
flex：フレックスアイテムのの幅を指定できるflex-basis・flex-grow・flex-shrinkを一括で指定可能。

【 2025/09/04 00:00 更新】

こじはな

Webエンジニア3年目。

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

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

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

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

flexのコードはこんな感じ

CSSプロパティflex-direction｜主軸の方向・並び順の指定

flex-direction の使い方

flex-direction のコード例

CSSプロパティflex-basis｜フレックスアイテムの主軸方向の幅に対する基準

flex-basis の使い方

flex-basis のコード例

CSSプロパティflex-grow｜フレックスアイテムの主軸方向の幅に対する増分

flex-grow の使い方

flex-grow のコード例

CSSプロパティflex-shrink｜フレックスアイテムの主軸方向の幅に対する縮小量

flex-shrink の使い方

flex-shrink のコード例

CSSプロパティflex｜flex-basis・flex-grow・flex-shrinkを一括指定

flex の使い方

flex のコード例

まとめ

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

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

CSS
プロパティflex-direction｜主軸の方向・並び順の指定

CSS
プロパティflex-basis｜フレックスアイテムの主軸方向の幅に対する基準

CSS
プロパティflex-grow｜フレックスアイテムの主軸方向の幅に対する増分

CSS
プロパティflex-shrink｜フレックスアイテムの主軸方向の幅に対する縮小量

CSS
プロパティflex｜flex-basis・flex-grow・flex-shrinkを一括指定