Flexboxでレイアウトする時、その背後にある思考プロセス

Flexboxはフレキシブルで、レイアウトをする時に非常に便利です。しかし、便利な機能と混乱を招く可能性がある機能があり、その背後にある思考プロセスについての一例を紹介します。

The Thought Process Behind a Flexbox Layout

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

Flexboxについて学びたい方は、以下の記事をご覧ください。

• 独学の人にオススメ！CSS Flexboxの基礎を一通り学べるチュートリアル
• CSS Flexboxの各プロパティの使い方を詳しく解説

Flexboxレイアウトの背後にある思考プロセス

2つのボックスを並べて配置、Flexboxはそういったものが得意だと聞いています。

親要素に「display: flex;」を加えるだけで、子は並べて配置される

クールですね。floatを使ってもよかったのですが、Flexboxの方が簡単です。

しかし、空いているスペースをすべて使いたいです。親要素の幅を100%にするだけでよいでしょうか？
親の幅に100%を指定できますが、子要素には何の影響も与えません。

親要素の幅を100%に

親要素に子要素が必要とするよりも多くのスペースがある場合、子要素だけでそのスペースを満たすことはできません。

では、2つの子要素にwidth: 50%;を指定するとどうでしょうか？ まぁ、機能しますが、Flexboxの利点は幅を特定する必要がないことです。Flexboxには子要素を拡張・収縮させるプロパティがあります。「flex: 1;」を子要素に加えます。

子要素に「flex: 1;」を加える

子要素に「flex: 1;」を加えると、子要素が拡張してスペースを満たします。

Flexboxは数学やハードコードの値を使用しないことが気に入っています。では、CSSに触れずに、3段組みのパターンにできるでしょうか？

3段組みのパターン

これも簡単ですね！

でも、ちょっと待ってください。例えば、単語が長いとサイズが変更されます、、、これら3つのボックスは常に1/3にしたいです。

単語が長いとボックスのサイズが変更される

それぞれのボックスを1/3にするには、「flex-basis: 33%;」では解決しません、「flex: 0 0 33%;」もダメです。確実に1/3にしたいのであれば、「width: 33%; flex-shrink: 0;」のような感じです。

3つのボックスはすべて同じ幅に

デザインにおいて、3つのボックスはすべて同じ幅にする必要があります。これを実装するにはCSS Gridがよいかもしれませんが、Flexboxで実装してみます。

ボックスの幅を変更させている長い単語は、おそらく例外です。子要素に「word-break: break-word; hyphens: auto;」を加えて、解決します。

長い単語に対応

もう一つ、解決方法があります。Strictにするのではなく、例外のアイテムをwrapします。Flexboxではそれができます。

「flex-wrap: wrap;」を加える

最初の2つはテキストの量が異なるのに同じ高さになっています、かっこいいですね。これはデフォルトのstretchですが、変更することもできます。2行目の高さが違うのはこのためです。

「Love」ボックスを一番上に配置したい場合はどうすればよいでしょうか？ Flexboxでは並びを変えることができます。orderプロパティのデフォルトは0なので、「order: -1;」を加えます。

「order: -1;」を加える

うまくいきました！ でも、一番上の「Love」ボックスは幅いっぱいにしたいです。そんな時は「flex-basis: 100%;」です。

「flex-basis: 100%;」を加える

このようにコードの順番と見た目の順番が異なるのはかなり奇妙です。おそらくこれは「絶対にやってはいけないリスト」に入るべきでしょう。
【記事コメントより】コードと見た目の順番が異なるのはFlexboxの魅力的な機能である一方、アクセシビリティの観点ではマークアップの順序であるべき。

特定の時点でFlexbox全体を救い出したい場合はどうなるでしょうか？ 例えば、「flex-direction: column;」で垂直に配置したり、シンプルに子要素を「display: block;」にして全幅にすることもできます。

「display: block;」を加える

レイアウトを処理するためにすべてのFlexboxを変更するのではなく、単にFlexboxを使わないという選択肢もあります。

最後にこの記事は実際のUIを想定して、フレシキブルで便利な機能と混乱を招く可能性がある機能を確認するためのものです。

Flexboxは確かに多くのことができます！ 私のお気に入りは、スペースがある場合に自動マージンが他の要素をプッシュすることです。

デモを新しいウインドウで開き、表示サイズを狭くして、「User Menu」がコンテナの最後までどのようにプッシュされるかを確認してください。