横並びを行うために、float属性を使用した方法を学んだことがある人は多いのではないでしょうか?

実は、この float より遥かに簡単に 横並び を行える方法があります。それも、float にはできなかったような多くのレイアウトを実現できる機能をもっています。

それが今回学習する Flexbox(フレックスボックス)です。

この Flexbox を使用することができれば、Webサイトのレイアウトがぐんとしやすくなるはずです。

テキストの折返し

例えば、画像の周りでテキストを折り返すような場合は float を使用する必要があります。

以下のように、雑誌や新聞のようなレイアウトを表現しようとすれば必要になります。

floatを使う箇所

Flexboxが未対応

Flexbox は float に比べて新しい CSSです。

そのため、古いブラウザには対応していないことがあります。

ただ、この古いブラウザを使用しているユーザーは全体の0%に近いので、無視してもいい数値だと思います。

  • float でなければならない場合を除くと、Flexbox の方が簡単に表現できます。

Flexboxとは

CSS3 から新しく追加された Flexbox を使用して要素の配置を柔軟に指定することができます。

少し前まで、ブラウザやバージョンによって対応状況が異なっていましたが、現在の最新版ではIEを除き、通常の書き方で大丈夫です。

*以下の例で /* IE */ となっている箇所は IE 対応またはハックです。

Flexboxの例

display: flex; を親要素に適用

デフォルトでは親要素に flex-direction: row; が適用されるため、子要素が横並びとなります。

  • 1
  • 2
  • 3
  • 4

<style>
    .flex {
        display: -ms-flexbox; /* IE */
        display: flex;
    }
    
    .flex-horizontal {
        -ms-flex-direction: row; /* IE */
        flex-direction: row;
    }
</style>
<ul class="flex flex-horizontal">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
                

横方向の子要素の伸縮

  • 1
  • 2
  • 3
  • 4

<style>
    .flex {
        display: -ms-flexbox; /* IE */
        display: flex;
    }
    
    .flex-1 {
        -ms-flex: 1 1 0.000000001px; /* IE */
        flex: 1;
        flex-basis: 0.000000001px; /* IE */
    }
</style>
<ul class="flex">
    <li>1</li>
    <li class="flex-1">2</li>
    <li>3</li>
    <li>4</li>
</ul>
                

子要素の縦方向表示

  • 1
  • 2
  • 3
  • 4

<style>
    .flex {
        display: -ms-flexbox; /* IE */
        display: flex;
    }
    
    .flex-vertical {
        -ms-flex-direction: column; /* IE */
        flex-direction: column;
    }
</style>
<ul class="flex flex-vertical">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
                

縦方向の子要素の伸縮

伸縮させるために縦幅 height の指定が必要です。

  • 1
  • 2
  • 3
  • 4

<style>
    .flex {
        display: -ms-flexbox; /* IE */
        display: flex;
    }
    
    .flex-vertical {
        -ms-flex-direction: column; /* IE */
        flex-direction: column;
    }
    
    .flex-1 {
        -ms-flex: 1 1 0.000000001px; /* IE */
        flex: 1;
        flex-basis: 0.000000001px; /* IE */
    }
</style>
<ul class="flex flex-vertical" style="height: 300px;">
    <li>1</li>
    <li class="flex-1">2</li>
    <li>3</li>
    <li>4</li>
</ul>
                

伸縮率

  • 1
  • 2
  • 3
  • 4

<style>
    .flex {
        display: -ms-flexbox; /* IE */
        display: flex;
    }
    
    .flex-1 {
        -ms-flex: 1 1 0.000000001px; /* IE */
        flex: 1;
        flex-basis: 0.000000001px; /* IE */
    }
    
    .flex-2 {
        -ms-flex: 2; /* IE */
        flex: 2;
    }
    
    .flex-3 {
        -ms-flex: 3; /* IE */
        flex: 3;
    }
</style>
<ul class="flex">
    <li>1</li>
    <li class="flex-1">2</li>
    <li class="flex-3">3</li>
    <li class="flex-2">4</li>
</ul>
                

デフォルトの伸縮

  • 1
  • 2
  • 3
  • 4

<style>
    .flex {
        display: -ms-flexbox; /* IE */
        display: flex;
    }
</style>
<ul class="flex" style="height: 100px;">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
                

縦方向の中央寄せ

  • 1
  • 2
  • 3
  • 4

<style>
    .flex {
        display: -ms-flexbox; /* IE */
        display: flex;
    }
    
    .flex-center {
        -ms-flex-align: center; /* IE */
        align-items: center;
    }
</style>
<ul class="flex flex-center" style="height: 100px;">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
                

縦方向の先頭寄せ

  • 1
  • 2
  • 3
  • 4

<style>
    .flex {
        display: -ms-flexbox; /* IE */
        display: flex;
    }
    
    .flex-start {
        -ms-flex-align: start; /* IE */
        align-items: flex-start;
    }
</style>
<ul class="flex flex-start" style="height: 100px;">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
                

縦方向の末尾寄せ

  • 1
  • 2
  • 3
  • 4

<style>
    .flex {
        display: -ms-flexbox; /* IE */
        display: flex;
    }
    
    .flex-end {
        -ms-flex-align: end; /* IE */
        align-items: flex-end;
    }
</style>
<ul class="flex flex-end" style="height: 100px;">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
                

横方向の先頭寄せ

  • 1
  • 2
  • 3
  • 4

<style>
    .flex {
        display: -ms-flexbox; /* IE */
        display: flex;
    }
    
    .flex-start-justified {
        -ms-flex-pack: start; /* IE */
        justify-content: flex-start;
    }
</style>
<ul class="flex flex-start-justified">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
                

横方向の中央寄せ

  • 1
  • 2
  • 3
  • 4

<style>
    .flex {
        display: -ms-flexbox; /* IE */
        display: flex;
    }
    
    .flex-center-justified {
        -ms-flex-pack: center; /* IE */
        justify-content: center;
    }
</style>
<ul class="flex flex-center-justified">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
                

横方向の末尾寄せ

  • 1
  • 2
  • 3
  • 4

<style>
    .flex {
        display: -ms-flexbox; /* IE */
        display: flex;
    }
    
    .flex-end-justified {
        -ms-flex-pack: end; /* IE */
        justify-content: flex-end;
    }
</style>
<ul class="flex flex-end-justified">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
                

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

  • 1
  • 2
  • 3
  • 4

最初の子要素は先頭に寄せ、最後の子要素は末尾に寄せます。


<style>
    .flex {
        display: -ms-flexbox; /* IE */
        display: flex;
    }
    
    .flex-equal-justified {
        -ms-flex-pack: justify; /* IE */
        justify-content: space-between;
    }
</style>
<ul class="flex flex-equal-justified">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
                

横方向の子要素の等間隔配置(先頭末尾に間隔あり)

  • 1
  • 2
  • 3
  • 4

<style>
    .flex {
        display: -ms-flexbox; /* IE */
        display: flex;
    }
    
    .flex-around-justified {
        -ms-flex-pack: distribute; /* IE */
        justify-content: space-around;
    }
</style>
<ul class="flex flex-around-justified">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
                

子要素ごとの指定

  • 1
  • 2
  • 3
  • 4

<style>
    .flex {
        display: -ms-flexbox; /* IE */
        display: flex;
    }
    
    .flex-self-start {
        -ms-align-self: flex-start; /* IE */
        align-self: flex-start;
    }
    
    .flex-self-center {
        -ms-align-self: center; /* IE */
        align-self: center;
    }
    
    .flex-self-end {
        -ms-align-self: flex-end; /* IE */
        align-self: flex-end;
    }
    
    .flex-self-stretch {
        -ms-align-self: stretch; /* IE */
        align-self: stretch;
    }
</style>
<ul class="flex" style="height: 120px;">
    <li class="flex-self-start">1</li>
    <li class="flex-self-center">2</li>
    <li class="flex-self-end">3</li>
    <li class="flex-self-stretch">4</li>
</ul>
                

子要素の折返し

  • 1
  • 2
  • 3
  • 4

<style>
    .flex {
        display: -ms-flexbox; /* IE */
        display: flex;
    }
    
    .flex-wrap {
        -ms-flex-wrap: wrap; /* IE */
        flex-wrap: wrap;
    }
</style>
<ul class="flex flex-wrap" style="width: 160px;">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
                

逆方向の表示

この例では横方向のアイテムの表示順序を逆からに設定しています。縦方向の逆方向の表示の場合は、値を column-reverse に変更してください。

また、Flexboxで順序を変更した場合、これはあくまでも表示の順序を変えただけで HTMLタグ の順序そのものを変えるものではありません

  • 1
  • 2
  • 3
  • 4

<style>
    .flex {
        display: -ms-flexbox; /* IE */
        display: flex;
    }
    
    .flex-horizontal-reverse {
        -ms-flex-direction: row-reverse; /* IE */
        flex-direction: row-reverse;
    }
</style>
<ul class="flex flex-horizontal-reverse">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
                

表示順を指定

子要素の表示順序を指定します。

order の値の昇順で並べ替えが行われます。初期値は 0 で、マイナス値を含む整数値を設定できます。

またこちらも上記と同様で、HTMLタグ の順序そのものを変えるものではありません

  • 1
  • 2
  • 3
  • 4

<style>
    .flex {
        display: -ms-flexbox; /* IE */
        display: flex;
    }
    
    .order-minus-1 {
        -ms-flex-order: -1; /* IE */
        order: -1;
    }
    
    .order-1 {
        -ms-flex-order: 1; /* IE */
        order: 1;
    }
    
    .order-2 {
        -ms-flex-order: 2; /* IE */
        order: 2;
    }
</style>
<ul class="flex flex-horizontal-reverse">
    <li class="order-1">1</li>
    <li>2</li>
    <li class="order-2">3</li>
    <li class="order-minus-1">4</li>
</ul>
                

flex-basisについて

flex-basisFlexboxのアイテムの初期サイズを設定するための属性です。

横並びの場合は width と同じ役割をし、縦並びの場合は height と同じ役割をします。

ただし、width(または height)と一緒に flex-basis が有効に設定されている場合は、flex-basis の値が優先されます。

要素のサイズを柔軟に設定したい場合は、widthheight ではなく flex-basis を設定するとサイズを調整して表示してくれるため便利です。

また、Flexboxのアイテムはその要素に設定されている最小サイズ以下の大きさに収縮することはありませんこの最小サイズを設定する場合は、min-widthmin-height を設定してください。

課題

課題1のヒント

ナビゲーションバーのレイアウト
Flexboxを使用し、以下のようなナビゲーションバーを作成してください。

RAKUMA
  • リンク1
  • リンク2
  • リンク3
Frexbox を使用し、以下のようなレイアウトを作成してください。

ヘッダー
メインコンテナ
フッター