模写修行メディア

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

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

この記事をシェア:

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

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

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

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

✋ 注意

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

Flexboxとは?

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

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

よく使うプロパティはIEでもほとんどが使えるので、IE対応が必要な場合も安心です。

【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です。

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

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

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

flex-direction

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

  • row(初期値)やrow-reverseを指定した場合は主軸が横方向
  • columncolumn-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-directionrowrow-reverseを指定した場合は横方向が主軸に、columncolumn-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行目は左から順に配置にしたい)

回避方法は、擬似要素を使うテクニックなどがありますが、ネガティブマージンを使った方法がおすすめです。興味がある方は下記の記事もご覧ください。

Flexboxとネガティブマージンでカード型レイアウトを実装する方法!

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アイテム間の余白を具体的な数値で指定することが出来ます。

2021/4/26のSafari / iOSのアップデートで、Flexboxで使用するgapプロパティがSafariでも使えるようになったと話題になりました。これで全モダンブラウザで使えることになります。

注意
しばらくアップデートしないユーザーもいるので、その点も考慮して導入は慎重に検討しましょう。

💡 使用例

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

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

これだけで図のように綺麗に余白が空いてくれます。

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-directionrowrow-reverseの場合はflex-basiswidthと同じです。

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

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

flex-directioncolumncolumn-reverseの場合はflex-basisheightと同じです。

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の使用頻度は多いので、しっかり理解しましょう。

基礎学習を終えて実践的な経験を積みたい方は「模写修行」を!Flexboxの勉強にもなります!

模写修行

「模写修行」はこんな方におすすめ!

  • FlexboxやCSS Gridの実践的な使い方を学びたい
  • 基礎学習を終えて実践的な経験を積みたい
  • 破綻しない書き方を学びたい(= CSS設計を意識したコーディングを学びたい)
  • 実務と同じようにXDのデータを見ながらコーディングの練習をしたい
  • 現役で制作をやっている人のコードを見たい

「模写修行」ではデザインデータ(XD) / web上で見れる解説 / サンプルコードを配布しています。ご自身でデザインを見ながらコーディングに挑戦し、解説とサンプルコードで深く学ぶことができるサービスです。

この記事をシェア:

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

駆け出しエンジニアのためのコーディング練習教材