CSSグリッドとFlexBoxにはそれぞれ獨(dú)自の専門知識があり、これは一緒に最適です。グリッドは、ヘッダー、サイドバー、メインコンテンツ領(lǐng)域、フッターの配置など、全體のページ構(gòu)造に適した2次元レイアウトです。 FlexBoxは、ナビゲーションバー、ボタングループ、カードリストなどのコンポーネントの內(nèi)部配置により適した1次元レイアウトです。たとえば、3列のレイアウトの中央でグリッドを使用してからブロックして、FlexBoxを使用していくつかのボタンを自動的に並べます。実際の組み合わせ方法は次のとおりです。外側(cè)のコンテナは表示：グリッド全體のフレームワークを定義し、子要素はディスプレイ：各エリアのフレックスを使用して配置されます。一般的な構(gòu)造には、グリッドを使用してページ全體にブロックを分割すること、FlexBoxを使用してナビゲーションバー、ボタングループ、カードリスト內(nèi)の要素を整列することが含まれます。同じ容器にグリッドとフレックスボックスを同時に設(shè)定しないでください。親がグリッドを使用した後、子供は表示を設(shè)定する必要があります。ネストされた構(gòu)造では、深すぎるレベルのため、メンテナンスの困難を避ける必要があります。

最新のWebレイアウトを作成したい場合、CSSグリッドとFlexBoxは最も実用的な2つのツールです。それらはそれぞれ異なるシナリオを持っていますが、一緒に使用すると、最も複雑なレイアウトの問題を解決できます。キーは、誰を選ぶべきかではなく、誰を使用するか、誰を使用するかです。

グリッドを使用するのはいつ、FlexBoxを使用する時期ですか？

簡単に言えば、グリッドは2次元レイアウト（行と列で制御されている）であり、ヘッダー、サイドバー、メインコンテンツエリア、フッターの配置など、全體のページ構(gòu)造に適しています。 FlexBoxは、1次元レイアウト（一度に1つの行または1つの列のみが制御されます）であり、ナビゲーションバー、ボタングループ、カードリストなどのコンポーネントの內(nèi)部配置により適しています。

例えば：

• 3列のレイアウトを作成し、中央で上下に分割できる場合、グリッドがより適しています。
• いくつかのボタンを自動的に並べてアライメントさせたい場合は、FlexBoxはより簡単です。

そのため、完全なページでは、グリッドを使用して外層の領(lǐng)域を分割し、FlexBoxで內(nèi)側(cè)の層の要素を配置できます。

組み合わせて使用??する方法は？構(gòu)造に依存します

一般的な慣行は次のとおりです。

• display: gridを使用して、ページフレーム全體を定義します
• display: flex子供の要素を手配する

例えば：

 。容器 {
  ディスプレイ：グリッド;
  Grid-Template-Columns：200px 1fr 300px;
}

.sidebar {
  ディスプレイ：Flex;
  フレックス方向：列;
  justify-content：space-bethed;
}

このようにして、左の列は垂直に分布した構(gòu)造になり、他の領(lǐng)域のレイアウトに影響しません。

一般的な組み合わせ構(gòu)造：

• ページ全體は、グリッドを使用してパーティションに分割されます
• ナビゲーションバーとボタングループにFlexBoxを使用します
• FlexBoxを使用して、カードリスト內(nèi)にタイトル、寫真、その他の要素を調(diào)整します

注：方向とレベルを臺無しにしないでください

2つは一緒に使用できますが、エラーが発生しやすい領(lǐng)域に注意してください。

• グリッドとフレックスボックスをコンテナに設(shè)定しないでください、1つだけが有効になるので
• 親はグリッドを使用します。子供がF(xiàn)lexBoxを使用したい場合は、 display: flex for the Childを個別に設(shè)定する必要があります。
• ネストされた構(gòu)造では、論理を明確に保ち、??ネストが深すぎないようにしてください。そうしないと、維持するのは面倒です。

実際にトリックを踏みにじっている例を教えてください。

 <div class = "grid-container">
  <div class = "flex-box">
    <Span>アイテム1 </span>
    <Span>アイテム2 </span>
  </div>
</div>

 .grid-container {
  ディスプレイ：グリッド;
  Grid-Template-Columns：Repeat（3、1Fr）;
}

.flex-box {
  ディスプレイ：Flex;
  ギャップ：10px;
}

これは良い考えですが、誤って.flex-boxにgrid屬性を追加すると、グリッドコンテナになり、Flexが失敗します。

基本的にそれだけです。最初は少し混亂していると感じるかもしれませんが、覚えておいてください。グリッドは大きな構(gòu)造を制御し、FlexBoxは詳細(xì)の配置を擔(dān)當(dāng)し、異なるレベルで個別に使用するため、ほとんどのレイアウトニーズを簡単に処理できます。

以上がCSSグリッドとフレックスボックスを一緒に使用する方法チュートリアルの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。