flex css - 折り返すのではなく、特定の高さの後の要素をクリップします

Question

境界線は静的な高さと幅を表します。

図のように 3 回目にラップするのではなく、アイテム 5 と 6 を 2 行目に残し、アイテム 3 と 6 を切り取りたいと思います。 Flex でこれを実現するにはどうすればよいですか?

この問題を補うために、コンテナー (境界線で表示) の幅をユーザーの操作によってサイズ変更できます。広いときは。たとえば、4 つの要素を保持できる幅がある場合、4 つの要素すべてが 1 行目に表示され、残りの要素が 2 行目に表示されます。

コンテナの幅を折りたたむときは、以下の画像に示すように、最大​​ 2 行になるようにします。

視覚化のために結果を次のようにしたい:

[]

https://codepen.io/akeni/pen/LYBGOXB

ああああ

Answer 1

Flex コンテナを「要素」と呼ぶのは少しわかりにくいです。私は個人的にこれらを「blabla-container」と呼ぶことを好みます。「blabla」はその部分で使用する水です (例: 「nav-links-container」)。ただし、これはもちろん単なる好みの問題です。

この質問に関しては、新しい情報をありがとうございます。提案を受け入れるのであれば、最も簡単な方法は css-grid を使用することです:

リーリー

ここで詳細を確認できます: MDN ドキュメント、css-grid

ああ、もう 1 つ詳しく説明すると、「クリッピング」と呼ばれるものは、親コンテナーが固定サイズの子コンテナーを保持するのに十分な大きさではない場合に起こることであり、この変更を適用した後、同じように動作することが確認できない場合に起こります。 2 番目のコンテナー画像として、親コンポーネントを小さくするだけです (例: 200px)。