为什么 Margin: auto 在这个 Flex-box 容器中不起作用？

Question

主容器没有拉伸整个宽度

Margin-left: auto 在 Nav > Main 的 Flex-box 容器中不起作用，我不知道为什么。也许 main 样式中的 display: inherit 会导致这个问题，但即使将其更改为 flex 也无法解决。我在下面包含了一个演示。感谢您的帮助，希望不会占用您太多时间。提前致谢！

*,
::before,
::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  font-size: 1em;
  line-height: 1.5;
  color: rgba(0, 0, 0, 0.87); }

main {
  display: inherit;
  margin-right: 3rem;
  margin-left: 3rem; }

section {
  margin-top: 16px;
  margin-bottom: 16px;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(192, 192, 192, 0.6); }

nav {
  background-color: #2196f3;
  display: flex;
  padding-top: 16px;
  padding-bottom: 16px; }
  nav ul {
    display: inline-flex; }
    nav ul li {
      display: block; }
      nav ul li:not(:first-child) {
        margin-left: 32px; }
    nav ul a {
      display: block;
      color: rgba(255, 255, 255, 0.6); }
      nav ul a:hover {
        text-decoration: none;
        color: rgba(255, 255, 255, 0.87); }
    nav ul.secondary {
      margin-left: auto !important; }

ul, ol {
  list-style: none; }

h1 {
  font-size: 3.5em; }
  @media (min-width: 37.438em) {
    h1 {
      font-size: calc(3.5em + ((100vw - 37.438em) / (120 - 37.438)) * (5.998 - 3.5)); } }
  @media (min-width: 120em) {
    h1 {
      font-size: 5.998em; } }

h2 {
  font-size: 2.375em; }
  @media (min-width: 37.438em) {
    h2 {
      font-size: calc(2.375em + ((100vw - 37.438em) / (120 - 37.438)) * (3.75 - 2.375)); } }
  @media (min-width: 120em) {
    h2 {
      font-size: 3.75em; } }

h3 {
  font-size: 2em; }
  @media (min-width: 37.438em) {
    h3 {
      font-size: calc(2em + ((100vw - 37.438em) / (120 - 37.438)) * (2.999 - 2)); } }
  @media (min-width: 120em) {
    h3 {
      font-size: 2.999em; } }

h4 {
  font-size: 1.563em; }
  @media (min-width: 37.438em) {
    h4 {
      font-size: calc(1.563em + ((100vw - 37.438em) / (120 - 37.438)) * (2.024 - 1.563)); } }
  @media (min-width: 120em) {
    h4 {
      font-size: 2.024em; } }

h5 {
  font-size: 1.25em; }
  @media (min-width: 37.438em) {
    h5 {
      font-size: calc(1.25em + ((100vw - 37.438em) / (120 - 37.438)) * (1.499 - 1.25)); } }
  @media (min-width: 120em) {
    h5 {
      font-size: 1.499em; } }

h6 {
  font-size: 1.125em; }
  @media (min-width: 37.438em) {
    h6 {
      font-size: calc(1.125em + ((100vw - 37.438em) / (120 - 37.438)) * (1.25 - 1.125)); } }
  @media (min-width: 120em) {
    h6 {
      font-size: 1.25em; } }

h1, h2 {
  font-weight: 300; }

h3, h4, h5 {
  font-weight: 400; }

h6 {
  font-weight: 700; }

p.subtext {
  color: rgba(158, 158, 158, 0.87); }

a {
  color: rgba(30, 144, 255, 0.87);
  text-decoration: none; }
  a:hover {
    text-decoration: underline; }

h1, h2, h3, h4, h5, h6 {
  margin-top: .5em;
  margin-bottom: .5em; }

p {
  padding-top: 8px;
  padding-bottom: 8px; }

span.subheading {
  color: rgba(158, 158, 158, 0.87);
  font-size: calc(1em - 0.375em); }

.textAlign_center {
  text-align: center !important; }

/*# sourceMappingURL=main.css.map */

	<nav>
		<main>
			<ul>
				<li><a href="#">Home</a></li>
				<li><a href="#">Documentation</a></li>
			</ul>

			<ul class="secondary">
				<li><a href="#">Home</a></li>
				<li><a href="#">Documentation</a></li>
			</ul>
		</main>
	</nav>
	<main>
		<section>
			<article>
				<h1 class="textAlign_center">Responsive Typography</h1>
			</article>
		</section>
		<section>
			<article>
				<h2>Heading<span class="subheading">Subheading</span></h2>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam et vitae id, tempora, placeat modi, aliquam, illo dolores aut ad similique esse aliquid dolorum ipsum fugit eum nostrum optio laborum totam. Minus placeat recusandae velit neque officia esse, commodi officiis cumque quibusdam sequi tenetur hic, ullam aut itaque pariatur excepturi maxime ad aperiam quidem? Itaque officia eum a, aliquid necessitatibus similique accusamus aspernatur ipsum soluta esse beatae temporibus ducimus dolorem quasi, ipsam quos. Sint maiores tempore, at adipisci consequuntur illum rerum laborum aliquam commodi mollitia ducimus, harum veniam, laudantium modi provident porro. Quisquam illo nisi sapiente modi officia incidunt molestias.</p>
			</article>
		</section>
		<section>
			<article>
				<h2>Heading<span class="subheading">Subheading</span></h2>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam et vitae id, tempora, placeat modi, aliquam, illo dolores aut ad similique esse aliquid dolorum ipsum fugit eum nostrum optio laborum totam. Minus placeat recusandae velit neque officia esse, commodi officiis cumque quibusdam sequi tenetur hic, ullam aut itaque pariatur excepturi maxime ad aperiam quidem? Itaque officia eum a, aliquid necessitatibus similique accusamus aspernatur ipsum soluta esse beatae temporibus ducimus dolorem quasi, ipsam quos. Sint maiores tempore, at adipisci consequuntur illum rerum laborum aliquam commodi mollitia ducimus, harum veniam, laudantium modi provident porro. Quisquam illo nisi sapiente modi officia incidunt molestias.</p>
			</article>
		</section>
	</main>

Answer 1

Flexbox 有自己的布局定位属性，您可以使用它来代替添加边距进行定位。当你使用 flex 时，它已经为你定义了很多定位属性。我假设您正在尝试使用 marginLeft: "auto" 将您的弹性框向右推。使用 flex 属性，根据你的 flex box 主轴的位置，你只需要使用justify-content: flex-end 或align-items: flex-end。

如果您只需要重新调整一项，请尝试为此使用justify-self：https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self