模写修行メディア

Flexboxの使い方をどこよりも詳しく解説！図解やサンプルもあり！

HTML・CSS

レイアウトを組む際、Flexboxを使うことは多くあります。

Flexboxの基本的な使い方はわかっていても意外と細かい点については曖昧だったり、たまにしか使わないプロパティは忘れてしまうこともあると思います。

  • 駆け出しの方は1から学ぶため
  • 学習済みの方は改めて確認や忘れた時のため

これらの用途で役に立つように、"覚えるべき"Flexboxの全プロパティや注意点を図解も使ってまとめました。駆け出しの方向けに、サンプルや関連記事も載せているので是非参考にしてみてください。

✋ 注意

  • 全てのプロパティを紹介しているわけではありません
  • "覚えるべき"全てのプロパティを紹介しています

👇 メンターやってます 👇

模写修行やこのメディアを作ったエンジニア中心に、メンタリングサービスHello Mentorを運営しています。

0からweb制作やプログラミングの勉強を始める方はもちろん、12ヶ月以上独学している方や既にお仕事をしている方にもご利用いただいています！

模写武者くんのアイコン
  • 独学に限界を感じている...
  • 何をどこまで勉強すれば良いかわからない...
  • 自分の書き方が正しいかわからない...
  • 検索しても解決しない問題が多い...
  • 転職や副業のアドバイスが欲しい...

このような方は、ぜひ下記のリンクからサービス詳細をご覧ください。個別説明会もお気軽にお申し込みください。

※ 少人数運営のため人数制限あり ※

詳しいサービス内容を見る

転職・独立成功者も出ています！

👆 メンターやってます 👆

この記事の目次

Flexboxとは？

FlexboxとはFlexible Box Layout Moduleのことで、横並びなどのレイアウトを実装する時に使います。

一昔前はtableやfloatを使ってレイアウトを実装していましたが、今はFlexboxやCSS Gridを使った方がより効率的にスッキリ書くことができます。

CSS Gridに関しては、下記の記事で詳しく紹介しています。

【CSS Grid入門】図解も交えて使い方を詳しく解説！

Flexboxの基本

Flexboxの基本の図
<div class="flex-container"><!-- 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>

/* flexコンテナ */
.flex-container {
    display: flex;
    ...
}

/* flexアイテム */
.flex-item {
    ...
}

Flexboxの基本的な形です。

上の図やコードのように、Flexboxには、flexコンテナとflexアイテムがあります。

  • flexコンテナに対してdisplay: flex;
  • flexコンテナの"直下"にflexアイテムを配置

これだけでflexアイテムが横並びになります。これに加え、Flexbox関連の様々なプロパティを使い、レイアウトを作っていくことになります。

  • flexコンテナに指定するもの
  • flexアイテムに指定するもの

Flexbox関連のプロパティは上の2つに別れます。

👇 flexコンテナに指定するもの

  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items
  • align-content
  • gap

👇 flexアイテムに指定するもの

  • flex-grow
  • flex-shrink
  • flex-basis
  • flex
  • align-self
  • order

次のセクションからこれら全てについて解説していきます。プロパティによっては使用用途のサンプルも紹介します。

【初心者向け】注意したいポイント！

<!-- これだとダメ！ -->
<h2 class="service-title">サービス</h2>
<div class="service-list">
    <div class="service-item">web制作</div>
    ...
    <div class="service-item">マーケティング支援</div>
    <p class="service-note">詳しいサービス内容についてはお問い合わせください。</p>
</div>

service-itemを横並びにしたい場合、上のようにすると、service-noteも横に並んでしまいます。flexコンテナの直下には"横並びにしたい要素のみ"を配置する点に注意してください。

<!-- 正しくはこう！ -->
<h2 class="service-title">サービス</h2>
<div class="service-list">
    <div class="service-item">web制作</div>
    ...
    <div class="service-item">マーケティング支援</div>
</div>
<p class="service-note">詳しいサービス内容についてはお問い合わせください。</p>

このようにすればOKです。

【駆け出しの方へ】独学に限界を感じてませんか？

プログラミングやデザインは独学可能ですが、ほとんんどの方が苦戦します。

↓このように感じていませんか？

  • 何をどこまで勉強すれば良いかわからない...
  • 自分の書き方が正しいかわからない...
  • 検索しても解決しない問題が多い...
  • 転職や副業するまでの道が見えない...

そんな問題を解決するために、模写修行やこのメディアを作ったエンジニア/デザイナー中心に、メンタリングサービスHello Mentorを始めました。

スクールのような大金は必要ありません。高額な費用は払いたくないけど、プロのサポートが欲しい方は、ぜひ下記のリンクからサービス詳細をご覧ください。

※ 少人数運営のため人数制限あり ※

詳しいサービス内容を見る

転職・独立成功者も出ています！

👆 メンターは全員現役エンジニア 👆

flexコンテナに指定するもの

  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items
  • align-content
  • gap

これらの『flexコンテナに指定するもの』について1つずつ解説します。

flex-direction

flex-directionは、flexアイテムの並ぶ方向(主軸)を指定するプロパティです。

  • row(初期値)やrow-reverseを指定した場合は主軸が横方向
  • columnやcolumn-reverseを指定した場合は主軸が縦方向

このようになります。『主軸とは何か』については後述します。

👇 指定できる値

  • row(初期値)
  • row-reverse
  • column
  • column-reverse

row(初期値)

rowとrow-reverseの解説図
.flex-container {
    display: flex;
    flex-direction: row; /* 初期値なので指定しなくても良い */
}

rowを指定した場合、主軸が横方向になり、先頭(左)から横並びになります。

row-reverse

rowとrow-reverseの解説図
.flex-container {
    display: flex;
    flex-direction: row-reverse;
}

row-reverseを指定した場合、主軸が横方向になり、末尾(右)から横並びになります。

column

columnとcolumn-reverseの解説図
.flex-container {
    display: flex;
    flex-direction: column;
}

columnを指定した場合、主軸が縦方向になり、先頭(上)から縦並びになります。

column-reverse

columnとcolumn-reverseの解説図
.flex-container {
    display: flex;
    flex-direction: column-reverse;
}

column-reverseを指定した場合、主軸が縦方向になり、末尾(下)から縦並びになります。

超重要！Flexboxにおける軸とは？

Flexboxには軸という概念があり、主軸とクロス軸を考慮する必要があります。その主軸を決めるのがflex-directionでした。

flex-directionでrowやrow-reverseを指定した場合は横方向が主軸に、columnやcolumn-reverseを指定した場合は縦方向に主軸になります。

主軸の解説図

上の図は主軸が横方向の場合です。主軸とクロス軸に加えて、それぞれ先頭と末尾があります。

Flexboxのプロパティは主軸が横方向 / 縦方向のどちらかによって各プロパティの挙動が変わる点に注意しないといけません。

主軸が横方向の場合

主軸の解説図
.flex-container {
    display: flex;
    flex-direction: row; /* 初期値なので指定しなくても良い */
    justify-content: space-between;
}

主軸が横方向の場合は、space-betweenは flex アイテム間の横方向の間隔を指定しています。(space-betweenに関しては後述します)

主軸が縦方向の場合

主軸の解説図
.flex-container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

主軸が縦方向の場合は、space-betweenはflexアイテム間の縦方向の間隔を指定しています。

このように主軸によって、横方向の間隔を指定するか縦方向の間隔を指定するかが変わります。

Point!
最初はややこしいかもしれませんが、横方向や縦方向ではなく、『主軸やクロス軸に対して...』のような理解をすると良いです。

意外と使えるrow-reverse

意外と使えるrow-reverse

例えば上のようなデザインの場合、偶数番目だけrow-reverseにすれば実装できます。

.flex-container {
    display: flex;
    ...
}

.flex-container:nth-child(2n){
    flex-direction: row-reverse;
}

これだけでOKです。

flex-wrap

flex-wrapはflexアイテムがflexコンテナの幅や高さを超えた時に折り返すかどうかを指定するプロパティです。

👇 指定できる値

  • nowrap(初期値)
  • wrap
  • wrap-reverse

nowrap(初期値)

nowrap(初期値)の解説図
.flex-container {
    display: flex;
    flex-direction: row; /* 初期値なので指定しなくても良い */
    flex-wrap: nowrap; /* 初期値なので指定しなくても良い */
}

nowrapを指定した場合、flexアイテムに幅を指定しても縮小されて折り返しません。

wrap

wrapの解説図
.flex-container {
    display: flex;
    flex-direction: row; /* 初期値なので指定しなくても良い */
    flex-wrap: wrap;
}

wrapを指定した場合、flexコンテナにflexアイテムが収まりきらなければ、図のように折り返します。

wrap-reverse

wrap-reverseの解説図
.flex-container {
    display: flex;
    flex-direction: row; /* 初期値なので指定しなくても良い */
    flex-wrap: wrap-reverse;
}

wrap-reverseを指定した場合、flexコンテナにflexアイテムが収まりきらなければ、図のように折り返します。

flex-flow

  • flex-direction
  • flex-wrap

これら2つをまとめて指定するためのプロパティです。初期値はrow nowrapです。

使用例

.flex-container{
    flex-flow: row nowrap;
    ...
}

justify-content

justify-contentは主軸方向の、flexアイテム間やflexアイテム周囲の配置を指定するプロパティです。

👇 指定できる値

  • flex-start(初期値)
  • flex-end
  • center
  • space-between
  • space-around

flex-start(初期値)

flex-start(初期値)の解説図
.flex-container {
    display: flex;
    flex-direction: row; /* 初期値なので指定しなくても良い */
    justify-content: flex-start; /* 初期値なので指定しなくても良い */
}

flex-startを指定した場合、flexアイテムは先頭寄りで配置されます。

flex-end

flex-endの解説図
.flex-container {
    display: flex;
    flex-direction: row; /* 初期値なので指定しなくても良い */
    justify-content: flex-end;
}

flex-endを指定した場合、flexアイテムは末尾寄りで配置されます。

center

centerの解説図
.flex-container {
    display: flex;
    flex-direction: row; /* 初期値なので指定しなくても良い */
    justify-content: center;
}

centerを指定した場合、flexアイテムは中央に配置されます。

space-between

space-betweenの解説図
.flex-container {
    display: flex;
    flex-direction: row; /* 初期値なので指定しなくても良い */
    justify-content: space-between;
}

space-betweenを指定した場合、flexコンテナの余った部分が、flexアイテム間に均等に割り振られます。

space-around

space-aroundの解説図
.flex-container {
    display: flex;
    flex-direction: row; /* 初期値なので指定しなくても良い */
    justify-content: space-around;
}

space-aroundを指定した場合、flexコンテナの余った部分が、flexアイテムに均等に割り振られます。各flexアイテムに均等に割り振られるので、flexアイテム間の余白は両端の余白の2倍になります。

最後の1つだけ右寄せや下寄せにしたい場合

最後の1つだけ右寄せにしたい場合の例

上の図のように、最後のユーザーアイコンだけ右寄せにしたい場合は、ユーザーアイコンに対して、margin-left: auto;をするだけでOKです。

最後の1つだけ下寄せにしたい場合の例

上の図のように、ボタンの横のラインを揃えたい場合は、ボタンに対して、margin-top: auto;で揃います。

紹介した2つのケースは、割と使う方法なので、詳しくは下記の記事をご覧ください。

Flexboxで最後の1つだけ右寄せや下寄せにする方法！

space-betweenの注意点

space-betweenの注意点

例えばユーザーが投稿するコンテンツ(メディアなど)で上の図のようなレイアウトにする場合、space-betweenを指定すると問題が生じます。

.posts{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.posts-item{
    width: 30%;
    ...
}

👆 NGなコード例です。投稿数がカラム数のn倍の場合は問題ありませんが、そうではない場合、意図しない見た目になります。

space-betweenの注意点

3カラムで投稿数が5つの場合、上の画像のようになります。(本来2行目は左から順に配置にしたい)

余白は後述する、gapを使うと良いです。

align-items

align-itemsはクロス軸に対してflexアイテムの配置を指定するプロパティです。

👇 指定できる値

  • stretch(初期値)
  • flex-start
  • flex-end
  • center
  • baseline

stretch(初期値)

stretch(初期値)の解説図
.flex-container {
    display: flex;
    flex-direction: row; /* 初期値なので指定しなくても良い */
    align-items: stretch; /* 初期値なので指定しなくても良い */
}

stretchを指定した場合、flexコンテナ埋めるように広がります。

flex-start

flex-startの解説図
.flex-container {
    display: flex;
    flex-direction: row; /* 初期値なので指定しなくても良い */
    align-items: flex-start;
}

flex-startを指定した場合、flexアイテムは先頭寄りで配置されます。

flex-end

flex-endの解説図
.flex-container {
    display: flex;
    flex-direction: row; /* 初期値なので指定しなくても良い */
    align-items: flex-end;
}

flex-endを指定した場合、flexアイテムは末尾寄りで配置されます。

center

centerの解説図
.flex-container {
    display: flex;
    flex-direction: row; /* 初期値なので指定しなくても良い */
    align-items: center;
}

centerを指定した場合、flexアイテムは中央に配置されます。

baseline

baselineの解説図
.flex-container {
    display: flex;
    flex-direction: row; /* 初期値なので指定しなくても良い */
    align-items: baseline;
}

baselineを指定した場合、ベースラインに揃います。

baselineの使い所

baselineの解説図

baselineの使い所はあまり多くありませんが、上の図のようなデザインの時は使えます。

つまずきポイントを事前に回避！

HTMLの書き方によって初期値のstretchが原因で画像が伸びてしまう場合があります。対処方法は下記の記事で紹介しています。

Flexboxで画像が縦に伸びる(比率がおかしい)時の対処方法！

align-content

align-contentはクロス軸方向の、flexアイテム間やflexアイテム周囲の配置を指定するプロパティです。

justify-contentの逆軸方向版だと考えると分かりやすいかもしれません。

👇 指定できる値

  • stretch(初期値)
  • flex-start
  • flex-end
  • center
  • space-between
  • space-around

stretch(初期値)

stretch(初期値)の解説図
.flex-container {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row; /* 初期値なので指定しなくても良い */
    align-content: stretch; /* 初期値なので指定しなくても良い */
}

stretchを指定した場合、flexコンテナの高さを全て埋めるように配置されます。

flex-start

flex-startの解説図
.flex-container {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row; /* 初期値なので指定しなくても良い */
    align-content: flex-start;
}

flex-startを指定した場合、先頭に詰めて配置されます。

flex-end

flex-endの解説図
.flex-container {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row; /* 初期値なので指定しなくても良い */
    align-content: flex-end;
}

flex-startを指定した場合、末尾に詰めて配置されます。

center

centerの解説図
.flex-container {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row; /* 初期値なので指定しなくても良い */
    align-content: center;
}

centerを指定した場合、中央配置されます。

space-between

stretch(初期値)の解説図
.flex-container {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row; /* 初期値なので指定しなくても良い */
    align-content: space-between;
}

space-betweenを指定した場合、flexコンテナの余った部分が、flexアイテム間に均等に割り振られます。

space-around

space-aroundの解説図
.flex-container {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row; /* 初期値なので指定しなくても良い */
    align-content: space-around;
}

space-aroundを指定した場合、flexコンテナの余った部分が、flexアイテムに均等に割り振られます。

gap

gapの使用例
.flex-container{
    display: flex;
    flex-wrap: wrap;
    gap: 50px 25px;
    ...
}

.flex-item{
    width: 100px;
    ...
}

gapはflexアイテム間の余白を具体的な数値で指定することが出来ます。

gap: 50px 25px;の1つ目が上下の余白、2つ目は左右の余白になります。

flexアイテムに指定するもの

  • flex-grow
  • flex-shrink
  • flex-basis
  • flex
  • align-self
  • order

これらの『flexアイテムに指定するもの』について1つずつ解説します。

flex-grow

flex-growはflexコンテナの余ったスペースをどれだけの比率でflexアイテムに分配するかを指定するプロパティです。

👇 指定できる値

  • 数値

※ 負の値は不可 / 初期値は0

※ 初期値は0なのでflex-growを指定しない場合、余ったスペースは分配しされません。

flexアイテムの大きさを指定しているわけじゃない

flex-growの使用例

この図のように余ったスペースの分配比率を決めるのがflex-growです。flexアイテムの大きさの比率を決めているわけではありません。（flexアイテムの大きさの比率の決め方は後述します。)

flex-shrink

flex-shrinkはflexコンテナに余ったスペースがない場合、他のflexアイテムに対してどれだけの比率で縮小させるか指定するプロパティです。

👇 指定できる値

  • 数値

※ 負の値は不可 / 初期値は1

※ flex-growは余ったスペースがあった場合の指定に対して、flex-shrinkは余ったスペースがなかった場合の指定です。

計算方法はややこしい...

.flex-container{
    display: flex;
    width: 600px;
}

.flex-item:nth-child(1){
    flex-shrink: 2;
    width: 300px;
}

.flex-item:nth-child(2){
    flex-shrink: 3;
    width: 600px;
}

flex-shrinkの計算方法は結構ややこしいです。上のような指定があり、flexコンテナに余ったスペースがない場合、単純に2:3の比率で縮小するわけではありません。

指定されている幅や高さ(上の例の場合300pxや600px)も考慮して、どれくらい縮小するか決まります。

コーディング中に計算が必要になったことは1度もないので、下の計算式は理解しなくても良いです。

flex-shrinkの計算式

詳しい解説はしませんが、上の計算式のように、flex-shrinkの値とwidthの値を考慮して縮小する幅が決まります。興味がある方は調べてみてください。

つまずきポイントを事前に回避！

条件によっては画像や要素が潰れてしまう場合がありますが、flex-shrink: 0;を使うと解決できます。詳しくは下記の記事で紹介しています。

Flexboxで画像や要素が小さくなる(潰れる)時の対処方法！

flex-basis

flex-basisは flexアイテムの幅や高さを指定するプロパティです。

👇 指定できる値

  • 数値(widthやhightと同じ単位が使用可)

※ 負の値は不可 / 初期値はauto

widthやheightと何が違う？

.flex-container{
    display: flex;
    flex-direction: row; /* もしくはrow-reverse */
}

.flex-item{
    flex-basis: 100px; /* width: 100px;と同じ意味 */
}

flex-directionがrowやrow-reverseの場合はflex-basisはwidthと同じです。

.flex-container{
    display: flex;
    flex-direction: column; /* もしくはcolumn-reverse */
}

.flex-item{
    flex-basis: 100px; /* height: 100px;と同じ意味 */
}

flex-directionがcolumnやcolumn-reverseの場合はflex-basisはheightと同じです。

widthやheightは幅や高さを指定するプロパティですが、flex-basisは主軸と同じ方向のflexアイテムのサイズを指定しています。従って、主軸によっては幅になったり、高さになったりします。

flex

  • flex-grow
  • flex-shrink
  • flex-basis

これら3つをまとめて指定するためのプロパティです。初期値は0 1 autoです

使用例

.flex-item{
    flex: 0 1 auto;
}

知っておくと便利

flexアイテムを全て同じ大きさで配置したい場合は、flexアイテムに対して、flex:1を指定すれば実装できます。

flexの初期値は0 1 autoですが、flex:1を指定すると、1 1 autoになるわけではなく、1 1 0になります。flex:1で flex アイテムが全て同じ大きさになるのは、この仕様のせい(おかげ?)です。

詳しくは下記の記事をご覧ください。

Flexboxで均等幅(同じサイズ)で横並び配置する方法！

align-self

align-selfはクロス軸に対して、flexアイテムの配置を個別に指定するプロパティです。align-itemsでの指定を上書き出来ます。

align-itemsはflexコンテナに対して指定することで、flexアイテム全ての配置を指定できました。それに対して、align-selfはflexアイテムに対して、個別に指定するものです。

👇 指定できる値

  • auto(初期値)
  • flex-start
  • flex-end
  • center
  • baseline
  • stretch

使用例

align-selfの解説図
.flex-container {
    display: flex;
    align-items: stretch; /* 初期値なので指定しなくても良い */
    ...
}

.flex-item:nth-child(1) { align-self: auto; } /* 初期値なので指定しなくても良い */
.flex-item:nth-child(2) { align-self: flex-start; }
.flex-item:nth-child(3) { align-self: flex-end; }
.flex-item:nth-child(4) { align-self: center; }
.flex-item:nth-child(5) { align-self: baseline; }
.flex-item:nth-child(6) { align-self: stretch; }

この例では、flexコンテナにalign-items: stretchを指定しているので、1と6や2と5が同じになっていますが、align-itemsの値が変われば、違う結果になるので試してみてください。

order

orderはflexアイテムの順番を指定するプロパティです。デフォルトではHTMLに記述した順で表示されますが、orderを使うことで自由に順番を変更できます。

👇 指定できる値

  • 数値

※ 負の値も可 / 初期値は0

使用例

orderの解説図
.flex-container{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row; /* 初期値なので指定しなくても良い */
}

.flex-item:nth-child(1){ order: 3; }
.flex-item:nth-child(2){ order: 4; }
.flex-item:nth-child(3){ order: 1; }
.flex-item:nth-child(4){ order: 2; }

Flexboxの初期値まとめ

.flex-container {
    display: flex;
}

.flex-item {
    width: 100px;
}

例えば、👆 上のように指定した場合、👇 下のコードが適応されているのと同じことになります。

.flex-container {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: stretch;
    align-content: stretch;
}

.flex-item {
    width: 100px;
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
}

思い通りに実装出来ない場合は、初期値を確認することで解決の糸口になるかもしれません。

たくさん書いて覚えよう！

駆け出しの方にとって、Flexboxはややこしく、覚えるのが大変かもしれません。

なるべく分かりやすく、網羅的に解説したつもりですが、この記事でもイメージがつきにくかった箇所もあったと思います。

1回読んだだけで理解できて使いこなせる人はいないので、自分で書いてみてどんな挙動になるのか確かめながら覚えることがおすすめです。

サイトを制作する上で、Flexboxの使用頻度は多いので、しっかり理解しましょう。

独学に限界を感じていませんか？

現役エンジニアによるメンタリングサービス作りました！

模写修行やこのメディアを作ったエンジニア中心に、メンタリングサービスHello Mentorを運営しています。

👇 こんな方のためのサービスです。

  • 独学に限界を感じている...
  • 何をどこまで勉強すれば良いかわからない...
  • 自分の書き方が正しいかわからない...
  • 検索しても解決しない問題が多い...
  • 転職や副業のアドバイスが欲しい...

メンターを務めるのは、今も現役でコードを書いているエンジニアのみです。駆け出しの方やメンターだけをやっている方はいません。

高額な料金はかかりません。サブスク&入会金・解約料なしなので、リスクなく始められます。

少しでも興味がある方は、ぜひ下記のリンクからサービスサイトをご覧ください。個別説明会もお気軽にお越しください。(無理な営業等一切ございません！)

※ 少人数運営のため人数制限あり ※

詳しいサービス内容を見る

転職・独立成功者も出ています！

この記事を書いた人

Gakuのアイコン

Gaku / @gaku92014091

フリーランス8年を経て法人化(3期目)、業界歴は12年目。コンテンツ制作、ライティング、マーケティング、デザイン、コーディング、プログラミング(フロント)、幅広くやってます！webサービスを作るのが好き！

当メディア運営メンバーでメンターやってます！👉

詳しく見る

\Share/

模写修行のトップページのスクリーンショット
模写修行

実務レベルを体験するためのコーディング練習教材

詳しくはこちら