【CSS】Webレイアウトに必須!Flexboxをゼロから学習しよう!課題あり

フレックスボックスは、子要素の配置(レイアウト)を柔軟に指定することができる表示型で、display属性にflexを指定して使用します。
display属性は、要素自身またはその子要素の表示方法を指定する属性で、フレックスボックスは子要素の表示方法を指定する値です。
関連:【CSS】(display属性)block、inline、inline-blockについて

フレックスボックスを使用すると、子要素を横並びや縦並びに表示することが容易で、要素間の空いたスペースを要素で埋めるように伸長させたり、親要素からあふれないように収縮させることができます

そのため、これまで複雑な計算が必要だったレイアウトも簡単に実現することができ、近年のほとんどのWebサイトではフレックスボックスが使用されています。

Flexboxを使用できるブラウザ

フレックスボックスはCSS3から新しく追加された機能のため古いブラウザや古いバージョンでは使用できないことがあります。

近年ではほとんどのブラウザが対応しており、最新バージョンでは接頭詞(-webkit-)も使用する必要がありません。

しかし、すでに更新されていないIE11に対応する場合は一部機能で不具合が発生していたり、それ以前のバージョンでは対応していなかったりなど慎重に実装しなければなりません。

IE以外のブラウザで新しいバージョンを対象とする開発では問題なく実装できます。

ブラウザの対応状況についてはCan I Useで確認できます。

理解度チェック

  • Can I Useでフレックスボックスの実装状況について確認してみましょう!

Flexboxで縦横中央揃えする例

この例では、フレックスボックスで要素内の文字を縦横中央揃えに表示する方法を紹介します。


.box {
    width: 50px;
    height: 50px;
    background-color: orange;
    border: solid 1px skyblue;
}
    

<div class="box">1</div>
    
1

この要素内の文字を横方向の中央に表示させるだけであれば、text-aligin属性を使用することができます。

しかし文字を縦方向の中央に表示するためには、要素の高さや文字の行数などを意識する必要があり、場合によって複数の実装方法を使い分ける必要がありました。

フレックスボックスを使用すれば、親要素に「子要素を横中央、縦中央に配置してね」と指定するだけになります。


.box {
    width: 50px;
    height: 50px;
    background-color: orange;
    border: solid 1px skyblue;
    /* フレックスボックス */
    display: flex;
    /* 子要素の配置方法 */
    justify-content: center; /* 横中央 */
    align-items: center; /* 縦中央 */
}
    

<div class="box">1</div>
    
1

Flexboxでどのような配置ができるか確認してみよう

フレックスボックスでよく使用する属性と効果について説明します。

すべてを暗記する必要はないので、フレックスボックスでどのような配置が実現できるかについて学習しましょう。
また、親要素、子要素、それぞれにどんな属性を使用するのかについて意識しながら学習すると効果的です。

要素を横方向に配置

要素のdisplay属性にflexを指定すると、子要素が横並びに配置されます。

これは、主軸の方向を指定するflex-direction属性の初期値が横方向のrow(行)であるためです。


.parent {
    padding: 0;
    /* 親要素にフレックスを指定します */
    display: flex;
}

.box {
    /* 省略 */
}
    

<ul class="parent">
    <li class="box">1</li>
    <li class="box">2</li>
    <li class="box">3</li>
    <li class="box">4</li>
</ul>
    
  • 1
  • 2
  • 3
  • 4

flex-direction属性を横方向row(行)に明示的に指定する場合は次のように記述します。


.parent {
    padding: 0;
    /* 親要素にフレックスを指定します */
    display: flex;
    /* 主軸を横方向に指定します */
    flex-direction: row;
}
    

横方向の子要素を逆から配置

flex-direction属性にrow-reverseを指定すると、子要素の表示開始位置の先頭と末尾が逆になります。


.parent {
    padding: 0;
    /* 親要素にフレックスを指定します */
    display: flex;
    /* 横方向の子要素を逆から配置します */
    flex-direction: row-reverse;
}
    

<ul class="parent">
    <li class="box">1</li>
    <li class="box">2</li>
    <li class="box">3</li>
    <li class="box">4</li>
</ul>
    
  • 1
  • 2
  • 3
  • 4

横方向の子要素の伸長

空いたスペースを埋めるように要素を伸長して配置します。

伸長させたい子要素にflex-grow属性を指定します。flex-grow属性には数値を指定し、この値によって空いたスペースのどの割合をその要素で埋めるかを算出します。初期値は0です。


.parent {
    padding: 0;
    /* 親要素にフレックスを指定します */
    display: flex;
}

.flex-grow-1 {
    /* 要素の伸長係数を設定します */
    flex-grow: 1;
}
    

<ul class="parent">
    <li class="box">1</li>
    <li class="box flex-grow-1">2</li>
    <li class="box">3</li>
    <li class="box">4</li>
</ul>
    
  • 1
  • 2
  • 3
  • 4

初期値が0であるため、flex-grow属性に1を指定した要素が空きスペースを埋めるように伸長されます。

別の要素のflex-grow属性に2を指定すると次のようになります。


.parent {
    padding: 0;
    /* 親要素にフレックスを指定します */
    display: flex;
}

.flex-grow-1 {
    flex-grow: 1;
}

.flex-grow-2 {
    flex-grow: 2;
}
    

<ul class="parent">
    <li class="box">1</li>
    <li class="box flex-grow-1">2</li>
    <li class="box flex-grow-2">3</li>
    <li class="box">4</li>
</ul>
    
  • 1
  • 2
  • 3
  • 4

flex-grow属性に指定した係数の割合で要素が伸長しています。

また、flex-grow属性は、flex属性(flex-grow属性、flex-shrink属性、flex-basis属性の一括指定)に数値の値を1つだけ指定するのと同じ意味となり、flex: 1;と記述されることがあります。

横方向の子要素を先頭寄せ


.parent {
    padding: 0;
    display: flex;
    /* 子要素を先頭寄せにします */
    justify-content: flex-start;
}
    

<ul class="parent">
    <li class="box">1</li>
    <li class="box">2</li>
    <li class="box">3</li>
    <li class="box">4</li>
</ul>
    
  • 1
  • 2
  • 3
  • 4

横方向の子要素を中央寄せ


.parent {
    padding: 0;
    display: flex;
    /* 子要素を中央寄せにします */
    justify-content: center;
}
    

<ul class="parent">
    <li class="box">1</li>
    <li class="box">2</li>
    <li class="box">3</li>
    <li class="box">4</li>
</ul>
    
  • 1
  • 2
  • 3
  • 4

横方向の子要素を末尾寄せ


.parent {
    padding: 0;
    display: flex;
    /* 子要素を末尾寄せにします */
    justify-content: flex-end;
}
    

<ul class="parent">
    <li class="box">1</li>
    <li class="box">2</li>
    <li class="box">3</li>
    <li class="box">4</li>
</ul>
    
  • 1
  • 2
  • 3
  • 4

横方向の子要素を等間隔で配置

子要素を空きスペースに等間隔で配置します。

最初の要素は先頭に、最後の要素は末尾に配置されます


.parent {
    padding: 0;
    display: flex;
    /* 子要素を等間隔で配置します */
    justify-content: space-between;
}
    

<ul class="parent">
    <li class="box">1</li>
    <li class="box">2</li>
    <li class="box">3</li>
    <li class="box">4</li>
</ul>
    
  • 1
  • 2
  • 3
  • 4

横方向の子要素を等間隔で配置(先頭と末尾の要素に間隔を設ける)

子要素を空きスペースに等間隔で配置します。

最初の要素と最後の要素は、他の子要素間の半分の間隔をそれぞれ先頭と末尾に空けて配置します


.parent {
    padding: 0;
    display: flex;
    /* 子要素を等間隔で、先頭と末尾の要素にも間隔を設けて配置します */
    justify-content: space-around;
}
    

<ul class="parent">
    <li class="box">1</li>
    <li class="box">2</li>
    <li class="box">3</li>
    <li class="box">4</li>
</ul>
    
  • 1
  • 2
  • 3
  • 4

横方向の子要素を折り返す

横幅が150pxしかない親要素の中に、横幅50pxの子要素が4つあるとどうなるでしょうか?

フレックスボックスでは、親要素に収まるように子要素が収縮され表示されます。


.parent {
    padding: 0;
    display: flex;
    /* 親要素を150pxに指定します */
    width: 150px;
    /* 親要素を判別しやすいように色付します */
    height: 100px; 
    background-color: yellow;
}
    

<ul class="parent">
    <li class="box">1</li>
    <li class="box">2</li>
    <li class="box">3</li>
    <li class="box">4</li>
</ul>
    
  • 1
  • 2
  • 3
  • 4

子要素の縮小を止めたい場合は、min-width属性(もしくはmin-height属性)を指定します。


.parent {
    /* 省略 */
}

.box {
    min-width: 50px;
    /* 省略 */
}
    
  • 1
  • 2
  • 3
  • 4

子要素の収縮を止めることができましたが、親要素からは溢れてしまっています。

flex-wrap属性にwrapを指定すれば子要素を自動的に折り返すように設定できます。


.parent {
    padding: 0;
    display: flex;
    /* 折返しを指定します */
    flex-wrap: wrap;
    /* 省略 */
}
    
  • 1
  • 2
  • 3
  • 4

要素を縦方向に配置

主軸の方向を指定するflex-direction属性をcolumn(列)に指定することで子要素を縦方向に配置します


.parent {
    padding: 0;
    /* 親要素にフレックスを指定します */
    display: flex;
    /* 主軸を縦方向に指定します */
    flex-direction: column;
}
    

<ul class="parent">
    <li class="box">1</li>
    <li class="box">2</li>
    <li class="box">3</li>
    <li class="box">4</li>
</ul>
    
  • 1
  • 2
  • 3
  • 4

縦方向の子要素の伸長

横方向と同様に、縦方向でも子要素を伸長させることができ、flex-grow属性を使用します。

使い方も横方向と全く同じですが、横方向と異なり親要素に高さの指定が明示的に必要となることに注意してください。


.parent {
    padding: 0;
    display: flex;
    /* 高さを明示的に指定します */
    height: 300px;
}

.flex-grow-1 {
    flex-grow: 1;
}
    

<ul class="parent">
    <li class="box">1</li>
    <li class="box flex-grow-1">2</li>
    <li class="box">3</li>
    <li class="box">4</li>
</ul>
    
  • 1
  • 2
  • 3
  • 4

デフォルトの子要素の伸縮

デフォルトでは、フレックスボックスの子要素は親要素の横幅もしくは高さに合わせて自動的に伸縮するようになっています

これまでの例では、子要素(.box)にwidth属性とheight属性に明示的に大きさを指定していました。

例えば、子要素のheight属性を初期値autoで指定した場合は、次のようになります。


.parent {
    padding: 0;
    display: flex;
    /* 高さを明示的に指定します */
    height: 200px;
}

.box {
    /* 高さを初期値に指定します */
    height: auto;
    /* 省略 */
}
    

<ul class="parent">
    <li class="box">1</li>
    <li class="box">2</li>
    <li class="box">3</li>
    <li class="box">4</li>
</ul>
    
  • 1
  • 2
  • 3
  • 4

子要素の表示順を子要素に指定する

order属性は子要素の配置順序を指定するための属性で、子要素に指定します

順序は指定する整数値の昇順(小から大)に表示されます。

また、この順序は視覚的な表示のみにしか影響を与えません。


.parent {
    padding: 0;
    display: flex;
}

.order-minus-1 {
        order: -1;
    }
    
.order-1 {
    order: 1;
}

.order-2 {
    order: 2;
}
    

<ul class="parent">
    <li class="box order-1">1</li>
    <li class="box">2</li>
    <li class="box order-3">3</li>
    <li class="box order-minus-1">4</li>
</ul>
    
  • 1
  • 2
  • 3
  • 4

縦方向の表示でも同じ様に作用します。

  • 1
  • 2
  • 3
  • 4

子要素ごとに配置を指定

子要素それぞれの配置について指定する属性にalign-self属性があります。

フレックスボックスの要素の配置に関するCSSは、親要素に指定することが多いですが、このalign-self属性は子要素に指定します


.parent {
    padding: 0;
    height: 200px; 
    display: flex;
}

.flex-self-start {
    align-self: flex-start;
}

.flex-self-center {
    align-self: center;
}

.flex-self-end {
    align-self: flex-end;
}

.flex-self-stretch {
    align-self: stretch;
    /* 高さを初期値に指定します */
    height: auto;
}
    

<ul class="parent">
    <li class="box flex-self-start">1</li>
    <li class="box flex-self-center">2</li>
    <li class="box flex-self-end">3</li>
    <li class="box flex-self-stretch">4</li>
</ul>
    
  • 1
  • 2
  • 3
  • 4

理解度チェック

  • フレックスボックスの使い方について理解できましたか?

チャレンジ

レイアウトにはフレックスボックスを使用し、色や、文字などは好きなように決めてください。

ヘッダーを作成してみよう

Title
  • リンク
  • リンク
  • リンク

見出しを作成してみよう

Title
リンク
リンク

理解度チェック

  • チャレンジを実装してみよう!

前のレッスン
次のレッスン

Twitterでアウトプット

理解したことや分からないところはTwitterでつぶやいてみよう!

この学習ページで学んだことをTwitterでアウトプットしてください。

アウトプットするメリット

学習仲間が増える

同じ課題を持った仲間が増えるため、学習へのモチベーションが継続しやすくなります。

より深く理解する

頭では理解したと思っていても、文章化することで初めて気づくことがあります。