Flexbox CSSテクノロジーの機能に関するレイチェル・アンドリューによる記事を公開し続けます
シリーズの以前の記事：
Smashing Magazineの Flexboxシリーズの最後です。 この投稿では、 Flexboxを使用するためのオプションが実際に何であるかを考えるのに時間を費やします。CSSグリッドレイアウトがあるので、いつ、どのように使用できるかについていくつかの提案をします。
このシリーズの前半
他の記事をまだ選択していない場合、これは本質的に最後の投稿なので、最初にチェックしてください。 まず 、 フレックスコンテナが作成されたときに何が起こるかを説明しました 。 シリーズの2番目の記事では、 flexboxの主軸と横軸に沿って要素を整列する方法と要素を整列する方法について説明しました 。 3番目の記事では、Flexboxでのサイズ変更の仕組みと、フレックスの大きさをブラウザーが決定する方法を説明します。 Flexboxの動作方法が正確にわかったので、 振り向いて、これが最適なユースケースについて考えることができます。
GridまたはFlexboxを使用する必要がありますか？
これは今でもレイアウトのトレーニング時に尋ねられる主要な質問であり、一般に、人々が新しい方法での作業に慣れるにつれて、これはあなたが頻繁に尋ねる必要のない質問になると信じています。 経験が増えるにつれて、どのレイアウト方法を使用するかが理解できます。
ただし、この考えを理解し始めたばかりの場合は、 CSS Grid LayoutとFlexboxが両方ともCSSであることに注意してください。 display: grid
またはdisplay: flex
を指定した場合、多くの場合、違いよりも共通点を多く使用します。 GridとFlexboxはどちらも、 Box Alignment仕様の一部であるプロパティを使用します。 両方とも、 IntrinsicおよびExtrinsic Sizing CSS仕様で詳述されている概念に基づいています。 。
デザインでグリッドまたはFlexboxを使用するかどうかを尋ねるのは 、デザインでフォントサイズまたは色を使用するかどうかを尋ねるようなものです。 必要であれば、おそらく両方を使用する必要があります。 間違ったものを使用しても、誰もあなたを追いかけません。
そのため、 Vue.jsとReact 、 BootstrapまたはFoundationのいずれかを選択しません。 CSSを使用してレイアウトを完成させ、作業中のデザインの特定の部分に最も意味のあるCSSパーティクルを使用する必要があります。 各コンポーネントを確認し、最適なもの、または最適な要素の組み合わせを決定します。
グリッドにすることも、 Flexboxにすることもできます。 これは、一部のグリッド要素が柔軟または可逆になる外部グリッドコンテナにすることができます。 プロジェクトに必要な場合、 フレックス要素のネストに問題はありません。
Flexboxとは本当に何ですか？
Flexbox仕様では、レイアウト方法について次のように説明しています。
「 Flexレイアウトはブロックレイアウトのように見えます 。 フロートや列など、ブロックレイアウトで使用できるより複雑なテキストやドキュメント指向のプロパティが多くありません。代わりに、ある意味でスペース割り当てとコンテンツの配置のためのシンプルで強力なツールがあり、どのWebアプリケーションと複雑なWebページが長い間必要としていたか。」
ここでのキーフレーズは「スペースの割り当てとコンテンツの調整」だと思います。 Flexboxの目的は、さまざまなサイズのアイテムを大量に取り出して、コンテナ（可変サイズにすることもできます）に入れることです。 Flexboxはソフトです。 彼は私たちの要素に最適なレイアウトを作成しようとしており、より大きな要素にはより多くのスペースを、より小さな要素にはより少ないスペースを与え、それによってコンテンツの読みやすさを維持しています。
Flexboxが複雑で不可解であると感じた場合、これは多くの場合、 Flexboxをグリッドシステムとして使用してスペースのサイズと分布の制御を取り戻そうとするためです。 これを行うと、 Flexboxの動作に苦労するため、 Flexboxは奇妙で複雑に見えるかもしれません。 固有の柔軟性を備えています。
したがって、柔軟なレイアウトに非常に適したテンプレートは、各要素の理想的なサイズにあまり関心がないテンプレートです。 これらの要素を並べて表示するだけです。
改行したいパターンもありますが、厳密なグリッドは必要ありません。 元のグリッドとFlexboxの例を使用すると、グリッドで繰り返し自動入力構文を使用し、次に行折り返しフレックスコンテナを使用すると、2つの方法の違いがすぐにわかります。
グリッドの例では、 グリッド要素は行と列に配置されます。 （スペースに応じて）トラックの列数が変わると、要素は常に次に利用可能なグリッドセルに移動します。 実際、他の空のセルがある場合、 自動フローシナリオに従って、グリッド要素がトラックを囲むように埋めるために要求する方法はありません。
flexの例では、結果の要素はそれらの間に残されたスペースを共有するため、水平および垂直の配置は使用しません。
flex-basisをautoに設定し、いずれかのflex-elementsを増やすと、残りのスペースにも追加のスペースが提供され、行ごとに位置合わせが異なるようになります。
これは、 グリッドレイアウトで Flexboxを使用する場所の非常に鮮明な例です。 要素をラップするが、必要なスペースを1行ずつ占有する場合。 これはグリッドとは大きく異なります。 このようなテンプレートは、必要なスペースを占有し、厳密なグリッドに厳密に挿入されないタグのセット（表示する1つまたは2つの単語）にすることができます。
Flexboxは現在、コンテナ内の要素を垂直方向および水平方向に中央揃えするための最良の方法でもあります。
将来（ブラウザが柔軟なレイアウトの外でBox Alignmentプロパティをサポートする場合）、 display：flexをコンテナに追加せずにこれを行うことができます。 ただし、現時点では、必要なのは余分なCSS行だけです。これは問題ではありません。
Flexboxは 、小さな1次元コンポーネントで非常にうまく機能します。 フォームフィールド、アイコン、またはその他の情報のセットは、各要素を慎重にサイズ設定することなく、簡単に配置して柔軟に設定できます。
また、コンテンツをコンテナーの下部に移動して、ポップアップを防ぐ必要があるシナリオでFlexboxを選択することもできます。 次の例では、コンテナをフレックスコンテナにして、コンテンツを列に表示してから、中央を拡大してフッターをコンポーネントに押し下げます。
開発中、 Flexboxは多くの小さなタスク、アライメントの適切な実行、アイテム間のスペースの分散に役立ちます。 確かに、これらのタスクの一部に1次元メッシュコンテナを使用できます。何をするかについて心配する必要はありません。
ただし、 Flexboxは、 設計で予期していなかった要素を追加する必要がある場合に最適だと思います。 たとえば、 Gridを使用するナビゲーションコンポーネントがある場合、すべての要素に対して十分なトラックを作成します。「要素が多すぎる」場合、新しい行を作成したくないためです。 flexboxが十分に長い場合、要素をflex-basis 0（またはauto ）で柔軟にし、要素自体が新しいコンパニオンを行に入れて、スペースを解放します。
Flexboxを使用すべきでない場合
グリッドレイアウトよりもFlexboxを好むと思われるいくつかの考慮事項を検討したので、 Flexboxが最良の選択ではないかもしれないいくつかの場所を見ることができます。 Flexboxとグリッドの例については、 行ごとにスペースを占める要素に対して要素を水平方向および垂直方向に並べて既に検討しました。 そして、この違いを最初に考慮する必要があります。
グリッドの例には2次元のレイアウトがあります。 行と列を同時にレイアウトします。
例Flexboxは1次元レイアウトです。 フレックスラインをパックしましたが、スペースへの配置はラインごとに行われます。 各行は、基本的にFlex方向の新しいFlexコンテナとして機能します。
したがって、コンポーネントに2次元レイアウトが必要な場合は、 FlexboxではなくGridを使用することをお勧めします。 大きいコンポーネントであるか小さいコンポーネントであるかは関係ありません。 この記事の内容を1つ挙げるとすれば、何らかの理由でグリッドがメインページのレイアウト専用であり、 Flexboxがコンポーネント用であるという考えを頭から取り除いてください。 2次元レイアウトを必要とする小さなコンポーネントと、1次元レイアウトが最適なメインページ構造を持つことができます。
グリッドが最適なソリューションと見なされるもう1つの適切な場所は、幅を使用するか、フレックス要素の長さの単位としてフレックス単位を設定して、それらを別のフレックス要素のラインと整列させるか、何らかの方法で柔軟性を制限することです。 多くの場合、これは、2次元レイアウトメソッドが本当に必要であること、またはグリッドコンテナからのコントロールがレイアウトにより適していることを示しています。
たとえば、柔軟なレイアウトをグリッドのように見せて、要素の柔軟性を制限することができます。 flex-growを0に設定し、要素のサイズをパーセントで計算します。これは、フローティング「グリッド」の要素のサイズを決定する方法と同様です。 これを実行していることに気付いた場合は、グリッドレイアウトがこのタイプのレイアウト用に設計されているため、最適なアプローチであることをお勧めします。
そうは言っても、明確な正解も不正解もほとんどないことを覚えておいてください。 できることは、さまざまな方法を試して、コンポーネントに最適なものを確認することだけです。 あるブレークポイントでFlexboxを使用し、別のブレークポイントでグリッドを使用してレイアウト方法を切り替えることもできることに注意してください 。
そして、丸まってください！
このFlexboxシリーズが有用であり、フレックスアイテムのアライメントおよびキャリブレーションアルゴリズムを理解することで、生活が楽になることを実証できたことを願っています。
解決されていない問題がある場合、または使用されているレイアウト方法に関して明らかな答えがないと思われるテンプレートがある場合は、コメントを残してください。