フレックスボックスのアイテム間の間隔

質問

これは私が欲しいものです。

一番近いのは フレックスボックスのアイテムにマージンを適用し、最初の & 最後の子からマージンの半分を削除します。

問題なのは :first-child が常に最初に表示されるとは限らないことです。なぜなら、私はレイアウトの順序を変更することがあるからです ( 例 ).

マージンを適用する際に、視覚的な順序を考慮する方法はありますか？

どのように解決するのですか？

最近、CSSの仕様が を更新しました。 を適用するために gap プロパティを CSS グリッド要素に加え、フレックスボックス要素にも適用するようにしました。 この機能は、すべての主要なブラウザの最新バージョンでサポートされています。 . を使用すると gap プロパティを使えば、単に gap: 10px (または好きなサイズ)で望むものが得られます。