フレックスボックスと自動マージン

私がFlexboxを使い始めたとき、それはすべてのレイアウト問題を解決する私の秘密兵器のようでした.例えば、センタリング要素は非常に簡単になります.自動余白を使用する必要はありませんjustify-content: center プロパティは、ジョブをかなりよくします.しかし、それは、我々がFlexboxを使用するとき、自動マージンが役に立たないことを意味しますか?
ロゴと2つの他のリンク(接触とログイン)を含んでいる基本的なウェブサイトヘッダーから始めましょう.

HTMLです.

<div class="wrapper">
  <a href="" class="logo">My logo</a>
  <a href="" class="contacts">Contact</a>
  <a href="" class="login">Log in</a>
</div>

今、スタイリングを議論する時間です.

どこから始めますか.
最初のアイデアはjustify-content: space-between プロパティを設定し、ロゴ要素を大きくします.

.wrapper {
  display: flex;
  gap: 1rem;
  padding: 1rem 3rem;
  justify-content: space-between;
}

.logo {
  flex: 1;
}

一見、このソリューションは完璧に見えます.しかし、重大な欠点があります.ロゴは成長できるフレックスエレメントですflex: 1 ) そして、ページの右側に他のリンクを押すために余計なスペースを消費します.しかし、我々のロゴは、関連です.それで、それはロゴと接触要素の間のスペースが現在Clickableであることを意味します!

この問題を解決する方法は?
通常の方法は、右側のリンクをdiv タグ.とともにjustify-content: space-between property , ヘッダーは完全に機能します.

<div class="wrapper">
  <a href="">My logo</a>
  <div class="wrapper-links">
    <a href="" class="contacts">Contact</a>
    <a href="" class="login">Log in</a>
  </div>
</div>

.wrapper {
  display: flex;
  gap: 1rem;
  padding: 1rem 3rem;
  justify-content: space-between;
}
.wrapper-links {
  display: flex;
  gap: 1rem;
}

どのような場合は、HTMLコードの構造を変更したくないですか?
この場合、自動マージンは非常に便利です.autoはどん欲なプロパティです.それはすべての利用可能なスペースを取ることができることを意味します.それで、私がマージン権利を使うならば:Auto、それは他の関連からできるだけ遠くにロゴを押します.

<div class="wrapper">
  <a href="" class="logo">My logo</a>
  <a href="" class="contacts">Contact</a>
  <a href="" class="login">Log in</a>
</div>

.wrapper {
  display: flex;
  gap: 1rem;
  padding: 1rem 3rem;
  justify-content: space-between;
}
.logo {
  margin-right: auto;
}

私はあなたがこのトリックを参考に願っています.
ソースコードを見つけることができますhere .