境界線は静的な高さと幅を表します。
図のように 3 回目にラップするのではなく、アイテム 5 と 6 を 2 行目に残し、アイテム 3 と 6 を切り取りたいと思います。 Flex でこれを実現するにはどうすればよいですか?
この問題を補うために、コンテナー (境界線で表示) の幅をユーザーの操作によってサイズ変更できます。広いときは。たとえば、4 つの要素を保持できる幅がある場合、4 つの要素すべてが 1 行目に表示され、残りの要素が 2 行目に表示されます。
コンテナの幅を折りたたむときは、以下の画像に示すように、最大 2 行になるようにします。
視覚化のために結果を次のようにしたい:
[]
https://codepen.io/akeni/pen/LYBGOXB
ああああ
P粉3981178572024-04-02 11:12:50
Flex コンテナを「要素」と呼ぶのは少しわかりにくいです。私は個人的にこれらを「blabla-container」と呼ぶことを好みます。「blabla」はその部分で使用する水です (例: 「nav-links-container」)。ただし、これはもちろん単なる好みの問題です。< /p>
この質問に関しては、新しい情報をありがとうございます。提案を受け入れるのであれば、最も簡単な方法は css-grid を使用することです:
リーリーここで詳細を確認できます: MDN ドキュメント、css-grid
ああ、もう 1 つ詳しく説明すると、「クリッピング」と呼ばれるものは、親コンテナーが固定サイズの子コンテナーを保持するのに十分な大きさではない場合に起こることであり、この変更を適用した後、同じように動作することが確認できない場合に起こります。 2 番目のコンテナー画像として、親コンポーネントを小さくするだけです (例: 200px)。