给定这个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
通常,width:auto
使元素占用所有可用空间。在基本层面上,如果占用了一些空间,它就会占用其余的空间。另一方面,width: 100%
意味着元素将占据它的整个父元素。
Flex grow表示元素占用多少空间。如果父元素中有两个子元素,并且给其中一个设置了flex-grow: 2
,它将占用另一个元素两倍的空间