フレックスボックス項目を特定の 2 行に強制的に配置するにはどうすればよいですか?

Flexbox: 項目を 2 行で表示する

Flexbox では、コンテナーに flex-wrap:wrap を設定することで、項目を複数の行に簡単に分散できます。ただし、項目を特定の行に強制的に配置するには、要素のサイズと間隔を制御する必要があります。

項目の動的なサイズ変更の問題

提供されたコードには、flex を備えた 8 つの項目があります。 -grow: 1。これは、各項目が可能な限り多くの利用可能なスペースを占有しようとすることを意味します。これにより、目的の 2 行レイアウトが妨げられる可能性があります。

解決策: 項目の幅の制御

それぞれ 4 つの項目を含む 2 行を作成するには、子要素の固定幅を定義する必要があります。子スタイルを次のように変更します。

.child {
  flex: 1 0 21%; /* Adjust the percentage as needed */
}

• flex: 1 0 21%:

  • 1: flex-grow を 1 に設定し、項目を許可します。 to grown
  • 0: フレックスシュリンクを 0 に設定し、項目が拡張されないようにします。 21% 幅を超えて縮小
  • 21%: 各項目の初期幅を指定します (この値をわずかに調整する必要がある場合があります)

両方のフレックスを使用-ラップとアイテムの幅が定義されているため、アイテムは 4 つずつ 2 行にきちんと整列します。

以上がフレックスボックス項目を特定の 2 行に強制的に配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。