I'm trying to fill the width of a page with three flex boxes but I can't figure out how to. Is flex box the right method or should I be doing something else? I don't want any white space. Anyone?
我试图用三个弹性框填充页面的宽度,但我无法弄清楚如何。柔性盒是正确的方法还是我应该做其他事情?我不想要任何空白区域。任何人?
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>SVG - Introduction</title>
<link rel="stylesheet" href="svg.css"/>
</head>
<body>
<main><h1>Main</h1></main>
<nav>
<ul>
<li><p>Why</p></li>
<li><p>How</p></li>
<li><p>When</p></li>
</ul>
</nav>
<footer><address>Address</address></footer>
</body>
</html>
CSS:
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
height:100%
}
main {
height: 50%;
width: 100%;
background-color: #E1AD82;
}
nav {
display: -webkit-flex;
display: flex;
}
nav li {
-webkit-flex: 1;
flex: 1;
background: blue;
height:300px;
display: inline-block;
}
fiddle:
1 个解决方案
#1
1
You need to set the display:flex; properties on ul and li , not nav and li . here ul is your only one box that is 'flexing' .
你需要设置display:flex; ul和li的属性,而不是nav和li。这里ul是你唯一一个'弯曲'的盒子。
#1
1
You need to set the display:flex; properties on ul and li , not nav and li . here ul is your only one box that is 'flexing' .
你需要设置display:flex; ul和li的属性,而不是nav和li。这里ul是你唯一一个'弯曲'的盒子。