HTML5 and CSS3, Second Edition

<p>

Duisauteiruredolorin reprehenderitin voluptatevelitessecillum

doloreeu fugiatnullapariatur.Excepteursintoccaecatcupidatatnon

proident,suntin culpaqui officiadeseruntmollitanimid est laborum.

</p>

</section>

<sectionid="sidebar">

<ul>

<li><ahref="#">RelatedLink</a></li>

<li><ahref="#">RelatedLink</a></li>

<li><ahref="#">RelatedLink</a></li>

<li><ahref="#">RelatedLink</a></li>

</ul>

</section>

</div>

<footer>

<p>Copyright© 2013AwesomeCo</p>

</footer>

</body>

</html>

We have the typical HTML5 template, with a link to our style sheet, a <header>,

a <footer>, and a meaningless <div> that holds the main region and the sidebar.

This <div> is our container, and all of its child elements will be flex items. In

our style sheet, we define the container like this:

where_next/flexbox/stylesheets/style.css

.container{

display:-webkit-flex;

display: flex;

}

Then we define the main region’s width and we use the flex property on the

sidebar, which makes it fill up the rest of the space.

where_next/flexbox/stylesheets/style.css

#main{

width:80%;

-webkit-order:2;

order:2;

}

#sidebar{

-webkit-flex:1;

flex:1;

-webkit-order:1;

order:1;

}

report erratum • discuss

Defining Layouts with the Flexible Box Model • 241

Download from Wow! eBook <www.wowebook.com>