floatはもう不要！Flexboxを覚えて簡単レイアウト

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

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

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

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

https://youtu.be/hOQcg1y82w8

今回の学習内容

`float`が必要な場面

テキストの折返し

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

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

Flexboxが未対応

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

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

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

Can I use – Flexible Box

W3Counter: Web Browser Market Share Trends

Flexboxとは

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

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

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

Flexboxの例

`display: flex;` を親要素に適用

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


<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>

横方向の子要素の伸縮


<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>

子要素の縦方向表示


<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 の指定が必要です。


<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>

伸縮率


<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>

デフォルトの伸縮


<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>

縦方向の中央寄せ


<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>

縦方向の先頭寄せ


<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>

縦方向の末尾寄せ


<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>

横方向の先頭寄せ


<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>

横方向の中央寄せ


<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>

横方向の末尾寄せ


<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>

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

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


<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>

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


<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>

子要素ごとの指定


<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>

子要素の折返し


<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タグの順序そのものを変えるものではありません。


<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タグの順序そのものを変えるものではありません。


<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-basis は Flexboxのアイテムの初期サイズを設定するための属性です。

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

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

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

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

課題

課題１のヒント

課題１

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

課題２

Frexbox を使用し、以下のようなレイアウトを作成してください。

ヘッダー

メインコンテナ

【CSS】Flexbox(フレックスボックス)

投稿者: rabico 投稿日: 2020年6月9日2020年6月9日

`float`が必要な場面

テキストの折返し

Flexboxが未対応

Flexboxとは

Flexboxの例

`display: flex;` を親要素に適用

横方向の子要素の伸縮

子要素の縦方向表示

縦方向の子要素の伸縮

伸縮率

デフォルトの伸縮

縦方向の中央寄せ

縦方向の先頭寄せ

縦方向の末尾寄せ

横方向の先頭寄せ

横方向の中央寄せ

横方向の末尾寄せ

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

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

子要素ごとの指定

子要素の折返し

逆方向の表示

表示順を指定

flex-basisについて

課題

JavaScript

JavaScriptで本の検索アプリを作ろう

TypeScript

【初心者】TypeScriptを始めてみよう

バックエンド

フロントエンドとバックエンドの違いとは？それぞれの開発に必要な知識について

【CSS】Flexbox(フレックスボックス)

投稿者: rabico 投稿日: 2020年6月9日2020年6月9日

floatが必要な場面

テキストの折返し

Flexboxが未対応

Flexboxとは

Flexboxの例

display: flex; を親要素に適用

横方向の子要素の伸縮

子要素の縦方向表示

縦方向の子要素の伸縮

伸縮率

デフォルトの伸縮

縦方向の中央寄せ

縦方向の先頭寄せ

縦方向の末尾寄せ

横方向の先頭寄せ

横方向の中央寄せ

横方向の末尾寄せ

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

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

子要素ごとの指定

子要素の折返し

逆方向の表示

表示順を指定

flex-basisについて

課題

関連投稿

JavaScript

JavaScriptで本の検索アプリを作ろう

TypeScript

【初心者】TypeScriptを始めてみよう

バックエンド

フロントエンドとバックエンドの違いとは？それぞれの開発に必要な知識について

`float`が必要な場面

`display: flex;` を親要素に適用