How to fill width with flex boxes

StackOverflow https://stackoverflow.com/questions/22908585

  •  28-06-2023
  •  | 
  •  

题

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:

http://jsfiddle.net/qwPER/

有帮助吗？

解决方案

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' .

http://jsfiddle.net/qwPER/1/

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top