flexの使い方

2023.05.17 2023.05.16

Webサイトのレイアウトでよく使われるflex。

以前使われていたfloatにくらべて、格段に楽で、非常に多くのことが簡単にできます。ただ、基本をしっかりしておかないとうまく使えない要素ですし、ネット上のサンプルを参考にしても、うまくレイアウトできないと思います。

そこで、ここでは基礎部分に焦点をあてて、flexの使い方を解説したいと思います。

この内容を理解しておけば、自分で作業する場合もうまくできると思いますし、ネット上のチートシートを使って、より上手にデザインできると思います。

サンプルデータも用意しているので、苦手な方は、ぜひ一緒にやってみてください。

flexの大前提。flexは、子要素を並ばせるプロパティ。

まず、flexの大原則は、「display:flex」を設定した要素を親とし、その直下の子要素を横に並ばせるというものです。この部分を理解しておかないと、うまくレイアウトできません。逆に、flexでうまくレイアウトされない時は、親子関係がずれたりして、この原則が守られていないと思ってください。

それでは、サンプルを使って説明します。

まず、こちらのサンプルページは、flexを設定する前のページです。ブロック、インライン、画像など、いろいろなタグを使っています。

※現在は、インライン要素、ブロック要素という言葉はなくなりましたが、わかりやすくするため、この言葉を使っております。完全に理解する必要はないと思いますが、「HTML Living Standard」などで調べてみると、より深く学習できるかと思います。

それでは、早速親タグに「display:flex;」を設定します。

それが、このサンプルページです。先ほどのサンプルとは異なり、インライン要素、ブロック要素関係なく、一列になっているのがわかると思います。

これが、flexの大原則となる、横に並ばせる機能です。ただ、これだとレイアウトとしておかしいので、見た目を整えるため、子要素にも設定を行います。

最初に、子要素の幅を設定する「flex-basis」からやっていきましょう。

まず、こちらのサンプルを確認すると、黒枠のdivタグの中に、縦方向にdivタグが並んでいます。また、横幅を200pxで固定しています。

この横幅を、左を30%、真ん中を50%、右を20%でレイアウトしてみましょう。

flexの子要素に幅を指定する場合は、「flex-basis: 指定したい数字」と設定します。そして、子要素にbasisを設定したサンプルがこちらです。

今回はパーセントでの指定ですが、ピクセルやremも可能です。

次に、「flex-grow」を確認します。これは、親要素に余白がある場合、その余白を埋めるために拡大するかどうかを設定します。

まずは、こちらのサンプルを確認してください。

ここでは、basisを使って、No1に30%、No2に20%、No3に10%の幅を指定しています。合計が100%に満たないので、右端に余白があるのがわかると思います。

次に、No1とNo3に「flex-grow:0;」、No2に「flex-grow:1;」を設定したサンプルがこちらです。

先ほどのサンプルと異なり、No2の横幅が広がっているのがわかると思います。

「flex-grow」は、親要素に余白がある場合、「flex-grow: 0;」が設定されている子要素は拡大しない、「flex-grow: 1;」が設定されている子要素は拡大する、という効果になります。

あと、「flex-grow: 2;」のように、1以外の数字も設定できますし、2を設定した場合は、1とは見た目が変わることがあります。ですが、実際の制作においては、「flex-growの値が0なら拡がらない。1なら拡がる」という使い方で問題ないのでは、と思っています。

先ほどの「flex-grow」の逆で、親要素をはみ出した場合に、要素を縮小させるのが「flex-shrink」です。

このサンプルは、すでにshrinkを設定したものになりますが、flex-basisはどれも40%にしてます。ですが、No1とNo3は「flex-shrink:0;」、No2は「flex-shrink:1;」に設定しているので、No2だけ縮んでいるのがわかると思います。

「flex-shrink」は、子要素の合計が親要素をはみ出す場合、「flex-shrink: 0;」が設定されている子要素は縮小しない、「flex-shrink: 1;」が設定されている子要素は縮小する、という効果になります。

これら3つの要素を、毎回書くのは大変なので、ショートハンドが用意されています。
文法は、「flex: flex-growの値 flex-shrinkの値 flex-basisの値」となります。