CODEWITHSUNDEEP
htmlcssflexbox
Delal
Delal

Reputation: 131

How to fill width with flex boxes

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/

Upvotes: 0

Views: 273

Answers (1)

G-Cyrillus
G-Cyrillus

Reputation: 105903

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/

Upvotes: 1

Related Questions