Flexbox の子の周囲にスペースを均等に分配できますか?

フレックス項目間の均等なスペース: 包括的なガイド

フレックスボックスの子の周りにスペースを均等に分配できますか?

均等の達成フレックスボックスの子の周囲の間隔は、いくつかの方法で実現できます。

Justify-Content: Space-Around

質問で述べたように、justify-content: space-around はアイテムを周囲に等しいスペースで均等に配置します。ただし、項目の両側に余分なスペースがあるため、視覚的な間隔が不均等になる可能性があります。

フル ブラウザ サポート ソリューション: 擬似要素

最新のブラウザは擬似要素を認識します。 -フレックスアイテムとしてのフレックスコンテナ上の要素。 ::before および ::after 疑似要素をコンテナに追加し、justify-content: space-between を幅ゼロの疑似要素とともに設定すると、表示されるフレックス項目を均等に配置できます。このメソッドは、すべての主要なブラウザでサポートされています。

コード例

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

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

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

このアプローチでは、最初と最後の項目を含め、項目間の間隔が等しくなります。

以上がFlexbox の子の周囲にスペースを均等に分配できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。