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

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

フレックスボックスを利用して要素を配置する場合、最初と最後の項目を含むすべての項目間に等間隔が必要な状況がよく発生します。 .

「スペースアラウンド」の問題

CSS プロパティjustify-content: space-around は、アイテムの周囲に等しいスペースをあけてアイテムを均等に配置するように見えます。ただし、記事で述べたように、最初のアイテムにはコンテナの端に対して 1 単位のスペースがあり、その結果アイテム間の間隔が不等になります。

疑似要素による問題の解決

に対する 1 つのアプローチ等間隔を実現するには、擬似要素を利用する必要があります。 ::before および ::after 擬似要素をフレックス コンテナに追加することで、フレックス アイテムとしてカウントされる幅ゼロのマーカーを挿入できます。

justify-content: space-between を適用し、次の値にゼロ幅を指定することで、擬似要素、表示されるフレックス項目は等間隔で表示されます。

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

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

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

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