最初と最後を含め、フレックス項目間の間隔を等しくするにはどうすればよいですか?

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

問題

前の記事で強調したように、flexbox の子の周囲に等間隔を確保することには課題が生じます。 : space-around は不完全な解決策として提示されます。この記事では、最初と最後の項目を含め、均等な間隔を確保するためのより包括的な方法について詳しく説明します。

ソリューション

擬似要素

最近のブラウザーの進歩疑似要素 (::before および ::after) をフレックス コンテナ内のフレックス アイテムとして扱うことができます。これにより、等間隔を作成するための新たな可能性が広がります。

::before および ::after 擬似要素をコンテナに追加し、justify-content: space-between と幅ゼロの擬似要素を利用することで、表示されているフレックス項目間に等間隔の錯覚を作り出すことができます。

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

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

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

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