フレックスボックスを使用してこのレスポンシブ レイアウトを実装する方法

Question

私は、xy 枚のカードと 1 つのウィジェットを Flex コンテナー内にレンダリングする React アプリを作成しています。すべてのカードの幅と高さは同じですが、ウィジェットの高さは カードの高さ * 2 行ギャップ に等しくなります。コンテナの幅はビューポートの幅に基づいて変化し、視覚的にはそれぞれカードが 2 列または 3 列に見えるようになります。さらにわかりやすくするために、ウィジェットを青で表した、必要なレイアウトのモックアップ画像を提供しました。

何を試しても、行の高さをそのサイズに変更せずにウィジェットを正しい位置に表示することはできず、さらに 1 つまたは 2 つのカードをレンダリングする必要がある「空白の行」を残すことになります。以下の図に示されています。

私の現在のソリューションには Javascript が含まれており、ビューポートの幅に応じて、2 枚または 4 枚のカードを別の小さな Flex コンテナにロードし、メイン Flex コンテナの最初の子としてレンダリングされます。この回避策は視覚的にはうまく機能しますが、適切に動作させるにはさまざまな状況をカバーする必要があるため、コードがより複雑になります。 CSS/フレックスボックスを使用して同じ目標を達成したいと考えていますが、私はまだ初心者であり、これまでにこのようなレイアウトを作成したことがなく、明らかにその方法がわかりません。ウィジェット を 絶対に配置することはできません。これは、その子要素のスクロール機能が壊れてしまうためです。

役立つ場合に備えて、正しい比率でテスト用の HTML と CSS の測定値を提供します。

＃＃＃。容器 { マージン: 50ピクセル 300ピクセル; ディスプレイ: フレックス; フレックスラップ: ラップ; 行ギャップ: 20px; 列ギャップ: 20px; min-width: 320px; /* 2 列の幅 */ max-width: 490px; /* 3 列の幅 */ ボーダー: 3px ソリッド rgb(0, 22, 117); } .card { 幅: 150ピクセル; 高さ: 100ピクセル; 背景色: 素焼き; } .ウィジェット { height: 220px; /* カードの高さ * 2 行のギャップ */ 幅: 150ピクセル; 背景色: rgb(134, 204, 245); }

<div class="コンテナ">
  <div class="ウィジェット"></div>
  <div class="カード"></div>
  <div class="カード"></div>
  <div class="カード"></div>
  <div class="カード"></div>
  <div class="カード"></div>
  <div class="カード"></div>
  <div class="カード"></div>
  <div class="カード"></div>
  <div class="カード"></div>
  <div class="カード"></div>
  <div class="カード"></div>
  <div class="カード"></div>
  <div class="カード"></div>
  <div class="カード"></div>
  <div class="カード"></div>
  <div class="カード"></div>
  <div class="カード"></div>
  <div class="カード"></div>
</div>

<!-- オリジナルの jsx
<div className='コンテナ'>
  <div className='ウィジェット'></div>
  <div className='card'></div>
  <div className='card'></div>
  <div className='card'></div>
  <div className='card'></div>
  <div className='card'></div>
  <div className='card'></div>
  <div className='card'></div>
  <div className='card'></div>
  <div className='card'></div>
  <div className='card'></div>
  <div className='card'></div>
  <div className='card'></div>
  <div className='card'></div>
  <div className='card'></div>
  <div className='card'></div>
  <div className='card'></div>
  <div className='card'></div>
  <div className='card'></div>
</div>
-->

現在のプロジェクトのためだけでなく、知識と理解をさらに広げるために、Flexbox でこのようなレイアウトを作成する方法を学びたいと思っています。この問題を解決する方法について何かアイデアがあれば、助けてください。よろしくお願いします ：）＃＃＃

Answer 1

これは、JavaScript を必要とせずに、ネットワーク配布局を使用して実行できます。以下は例です:

＃＃＃。容器 { マージン: 50ピクセル 300ピクセル; 表示: グリッド; /* 列を自動計算します。最小セル幅は 140 ピクセルです */ グリッド テンプレート列:repeat(auto-fill, minmax(140px, 1fr)); /* 各セルの高さ */ グリッド自動行: 100px; グリッド自動フロー: 行密度。 ギャップ: 20px; 最小幅: 320ピクセル; 最大幅: 490ピクセル; ボーダー: 3px ソリッド rgb(0, 22, 117); } .card { 背景色: 素焼き; } .ウィジェット { 背景色: rgb(134, 204, 245); /* ウィジェット、2 行にまたがる */ グリッド行: 自動 / スパン 2; /* ウィジェットを右端の列に設定します */ グリッド列の終了: -1; }

<div class="コンテナ"> <div class="ウィジェット"></div> <div class="カード"></div> <div class="カード"></div> <div class="カード"></div> <div class="カード"></div> <div class="カード"></div> <div class="カード"></div> <div class="カード"></div> <div class="カード"></div> <div class="カード"></div> <div class="カード"></div> <div class="カード"></div> <div class="カード"></div> <div class="カード"></div> <div class="カード"></div> <div class="カード"></div> <div class="カード"></div> <div class="カード"></div> <div class="カード"></div> </div> <!-- オリジナルの jsx <div className='コンテナ'> <div className='ウィジェット'></div> <div className='card'></div> <div className='card'></div> <div className='card'></div> <div className='card'></div> <div className='card'></div> <div className='card'></div> <div className='card'></div> <div className='card'></div> <div className='card'></div> <div className='card'></div> <div className='card'></div> <div className='card'></div> <div className='card'></div> <div className='card'></div> <div className='card'></div> <div className='card'></div> <div className='card'></div> <div className='card'></div> </div> -->

は @ralph.m のように指定されています。

grid-column-end: -1; を .widget

.widget >

Answer 2

フレックスボックス レイアウトではこれを実行できません。2D グリッドは作成されないため、グリッドボックス レイアウトを使用する必要があります。 , そのため、要素は隙間を残さずに行と列にまたがることができます。

これは例です:

.grid {
/* スペースの余白を追加します */
  マージン: 1em 自動;
  パディング:1em;
  ギャップ: 1em;
 /* グリッドを構築します */
  表示: グリッド;
  グリッド自動フロー: 行密;/* 現れる可能性のある穴を埋めます */
  Grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); /* グリッドのサイズを自動計算します */
  Grid-auto-rows: 75px; /* デモの高さの行を指定します */
  max-width: 80%;/* 何でも */
  border: Solid;/* 私の境界線を見てください */
}

.card {
  背景色: サーモン;
}

。より大きい {
  背景色: ライトブルー;
  グリッド行: 1/ スパン 2;/* 最初の行を維持し、2 行にわたって配置します */
  Grid-column-end: -1; /* いくつあっても最後の列に表示し続けます */
}

<div class="グリッド">
  <div class="カード"></div>
  <div class="カード"></div>
  <div class="カード"></div>
  <div class="カード"></div>
  <div class="カード"></div>
  <div class="カード"></div>
  <div class="カード"></div>
  <div class="bigger">フロー内のどこにでも配置できますが、最上位に表示します</div>
  <div class="カード"></div>
  <div class="カード"></div>
  <div class="カード"></div>
  <div class="カード"></div>
  <div class="カード"></div>
  <div class="カード"></div>
  <div class="カード"></div>
  <div class="カード"></div>
  <div class="カード"></div>
  <div class="カード"></div>
  <div class="カード"></div>
</div>