フレックス項目間の等間隔を実現するにはどうすればよいですか?

フレックスボックス項目間の等間隔

フレックスボックス項目 (最初と最後の項目であっても) の間に均等なスペースを割り当てる方法をお探しですか?この記事では、この望ましい分散を実現するためのソリューションを検討します。

1 つのアプローチでは、疑似要素を justify-content: space-between プロパティと組み合わせて利用します。この手法は、ブラウザが疑似要素をフレックス コンテナ内のフレックス アイテムとして扱うという事実を利用します。 ::before 要素と ::after 要素をコンテナに追加すると、基本的に、スペースの配布に参加する非表示のプレースホルダーを作成できます。

以下のスニペットは、このメソッドの実装を示しています。

flex-container {
  display: flex;
  justify-content: space-between;
}

flex-container::before {
  content: "";
}

flex-container::after {
  content: "";
}

これにより、最も外側のものも含め、各項目の両側に均等なパディングが施された、等間隔のフレックス項目が効果的に得られます。このアプローチは十分にサポートされているソリューションを提供しますが、すべてのユースケースに適合するとは限りません。

より汎用性の高い代替手段として、justify-content のスペースアラウンド値を検討してください。これにより、視覚的にはアイテム間の間隔が等しくなくなりますが (各アイテムの両側のスペースが等しいため)、すべてのアイテムがコンテナの端から一貫した距離を維持することが保証されます。

flex-container {
  display: flex;
  justify-content: space-around;
}

以上がフレックス項目間の等間隔を実現するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。