flex-grow = 1，宽度: auto和just宽度: 100%

Question

考虑到这个HTML：

<nav id="drawer" class="dark_blue">
  <h2>Off Canvas</h2>
  <p>Click outside the drawer to close</p>
</nav>

<main class="light_blue">
  <a id="menu">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
      <path d="M2 6h20v3H2zm0 5h20v3H2zm0 5h20v3H2z"/>
    </svg>
  </a>
  <p>Click on the menu icon to open the drawer</p>
</main>

以及这些CSS属性(它们实际上在媒体查询中)

body {
     display: -webkit-flex;
     display: flex;
 }

 main {
     width: auto;
     /* Flex-grow streches the main content to fill all available space.*/
     flex-grow: 1;
 }

我就不能用

main {
   width: 100%;
}

而不是

main {
    width: auto;
    flex-grow: 1;
}

从视觉上看，它们有着同样的效果。

给你，一种工作的JSFiddle

Answer 1

通常，width:auto使元素占用所有可用空间。在一个基本的层次上，如果有一些空间被占据，它就占据了其余的空间。另一方面，width: 100%意味着元素将占据其整个父元素。

然而，Flex的增长表明一个元素占据了多少空间。如果在父元素中有两个子元素，并且您给其中一个元素一个flex-grow: 2，那么它将占用另一个元素的两倍空间。