ラップ時に Flex アイテムを左に揃える方法: `justify-content: space-between` による中央揃えの問題を解決しますか?

ラップ上のフレックス項目の配置: 中央から左へ

フレックスボックスを使用してレスポンシブなレイアウトを設計する場合、フレックス項目を水平方向に均等に配置することが望まれることがよくあります。ただし、コンテンツが新しい行に折り返されると、次の行が左からではなく中央から埋まり始める場合があります。この問題は、適切なフレックスボックス プロパティを利用することで解決できます。

解決策

ラップ時にフレックス項目が中央に整列しないようにする解決策は、justify-content: space-around ルールを justify に置き換えることです。 -content: space-between.

説明

flexbox の仕様に従い、justify-content: space-around はフレックス項目を主軸に沿って両端に半角スペースを入れて均等に配置します。ただし、スペースが不十分な場合、または項目が 1 つだけの場合は、中央のように動作します。

対照的に、justify-content: space-between は、フレックス項目を均等なスペースで均等に配置します。スペースが不十分な場合、またはアイテムが 1 つしかない場合は、フレックス アイテムを左から開始する flex-start と同様に機能します。

space-between を使用すると、スペースに関係なく、フレックス アイテムが強制的に左から揃えられます。

絞り込み

space-between を使用すると、コンテナの右側にスペースが残る場合があります。スペースアラウンド効果を希望する場合は、コンテナの左側と右側にパディングを追加してそれをシミュレートできます。

ただし、2 つの項目を新しい行に折り返すときに項目を整列させると、別の課題が発生し、さらに多くの作業が必要になります。調査。

以上がラップ時に Flex アイテムを左に揃える方法: `justify-content: space-between` による中央揃えの問題を解決しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。