on:2019年12月10日sponsorsFlexboxはフレキシブルで、レイアウトをする時に非常に便利です。便利な機能と混乱を招く可能性がある機能があり、その背後にある思考プロセスについての一例を紹介します。Layout下記は各ポイントを意訳したものです。※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。Flexboxについて学びたい方は、以下の記事をご覧ください。Flexboxの各プロパティの使い方を詳しく解説Flexboxレイアウトの背後にある思考プロセス2つのボックスを並べて配置、Flexboxはそういったものが得意だと聞いています。flex;」を加えるだけで、子は並べて配置されるクールですね。floatを使ってもよかったのですが、Flexboxの方が簡単です。空いているスペースをすべて使いたいです。親要素の幅を100%にするだけでよいでしょうか?親の幅に100%を指定できますが、子要素には何の影響も与えません。親要素の幅を100%に親要素に子要素が必要とするよりも多くのスペースがある場合、子要素だけでそのスペースを満たすことはできません。機能しますが、Flexboxの利点は幅を特定する必要がないことです。Flexboxには子要素を拡張・収縮させるプロパティがあります。1;」を子要素に加えます。1;」を加えると、子要素が拡張してスペースを満たします。Flexboxは数学やハードコードの値を使用しないことが気に入っています。CSSに触れずに、3段組みのパターンにできるでしょうか?3段組みのパターンこれも簡単ですね!でも、ちょっと待ってください。単語が長いとサイズが変更されます、、、これら3つのボックスは常に1/3にしたいです。33%;」もダメです。0;」のような感じです。3つのボックスはすべて同じ幅にデザインにおいて、3つのボックスはすべて同じ幅にする必要があります。Gridがよいかもしれませんが、Flexboxで実装してみます。ボックスの幅を変更させている長い単語は、おそらく例外です。auto;」を加えて、解決します。長い単語に対応もう一つ、解決方法があります。Strictにするのではなく、例外のアイテムをwrapします。Flexboxではそれができます。wrap;」を加える最初の2つはテキストの量が異なるのに同じ高さになっています、かっこいいですね。これはデフォルトのstretchですが、変更することもできます。2行目の高さが違うのはこのためです。Flexboxでは並びを変えることができます。上の「Love」ボックスは幅いっぱいにしたいです。100%;」を加えるこのようにコードの順番と見た目の順番が異なるのはかなり奇妙です。これは「絶対にやってはいけないリスト」に入るべきでしょう。【記事コメントより】コードと見た目の順番が異なるのはFlexboxの魅力的な機能である一方、アクセシビリティの観点ではマークアップの順序であるべき。block;」にして全幅にすることもできます。block;」を加えるレイアウトを処理するためにすべてのFlexboxを変更するのではなく、単にFlexboxを使わないという選択肢もあります。最後にこの記事は実際のUIを想定して、フレシキブルで便利な機能と混乱を招く可能性がある機能を確認するためのものです。私のお気に入りは、スペースがある場合に自動マージンが他の要素をプッシュすることです。Menu」がコンテナの最後までどのようにプッシュされるかを確認してください。