margin-right:auto;が効く理由を教えて下さい

Question

下記コードのcssの
「
.main-nav li:first-child {
margin-right: auto;
}
」
でmargin-right: auto;を設定すると最初のliだけが左寄せになり、他が右寄せになる様なのですがなぜそうなるのでしょうか？

margin-right: auto;は右に出来るだけマージンを取るという意味なのでしょうか？

<nav>
  <ul class="main-nav">
    <li><a href="#" class="logo">Logo</a></li>
    <li><a href="#">Menu 1</a></li>
    <li><a href="#">Menu 2</a></li>
    <li><a href="#">Menu 3</a></li>
    <li><a href="#">Menu 4</a></li>
  </ul>
</nav>

.main-nav {
  display: flex;
}
.main-nav li:first-child {
  margin-right: auto;
}

Answer 1

「margin」は、そのような仕様です。autoは自動で数値を算出しますが、片方に設定すると最大値を取るようになっています。

今回の場合、「flex」で横並びになりますが、最初の<li>の右側にスペースを最大限とるので、残りの<li>は自動的に右端に寄せられています。

参考先（古い記事ですが詳しく記載してあります）
CSS： marginの正しい理解

Comments

[tanakashouzoux]

ありがとうございます！最大値をとるなんて知りませんでした????