フレックス項目が複数の行にラップされないのはなぜですか?

フレックス項目がラップされない: 配置の問題の解決

問題:

複数行の正方形要素を表示しようとしている (3行ごとに)、高さは同じですが、すべて同じ上に表示されますline.

初期考慮事項:

フレックス コンテナのデフォルト設定は flex-wrap: nowrap で、フレックス アイテムを 1 行に制限します。ラッピングを有効にするには、このプロパティを Wrap に設定する必要があります。

解決策:

1. 親コンテナ スタイルに flex-wrap: Wrap を追加します。

   #list-wrapper {
     display: flex;
     flex-wrap: wrap;
     width: 100%;
   }

2. フレックス項目の寸法が次のとおりであることを確認してください。ブラウザが適切なレイアウトを計算できるように定義 (例: 幅と高さ):

   #list-wrapper div {
     width: 33.33%;
   }
   
   #list-wrapper div img {
     flex: 1;
   }

補足:

• Flex アイテムは、デフォルトでは左上隅から行方向に積み重ねられます。この動作を変更するには、flex-direction の使用を検討してください。
• ブラウザは、使用可能なスペースと指定された flex プロパティに基づいて、flex 項目のサイズと配置を自動的に計算します。
• より高度なレイアウトの場合、追加の flex プロパティ (justify-content、align-content など) を使用して、コンテンツ内での flex アイテムの位置を微調整できます。コンテナ。

以上がフレックス項目が複数の行にラップされないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。