CSS Layout How to - Create Three Column Layout with Flexbox

Question

We would like to know how to create Three Column Layout with Flexbox.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
#content {display:-webkit-flex; display:flex; flex-flow:row wrap;}
#one {width:23.3%; padding:5%; background:#ccc; -webkit-order:3; order:3;}
#two {width:23.3%; padding:5%; background:#fff; -webkit-order:1; order:1;}
#three {width:23.3%; padding:5%; background:#eee; -webkit-order:2; order:2;}
  </style><!--from www .  ja v  a2s . co  m-->
</head>
<body>
  <article id="content">
    <div id="one">
        <h1>Div One</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ultricies leo ipsum, quis dapibus mi dignissim vitae. Nunc tristique luctus fermentum. Cras vehicula scelerisque libero, eget cursus tortor imperdiet eu. Sed imperdiet semper nibh, ac bibendum velit sodales ut.</p>
    </div>
    <div id="two">
        <h1>Div Two</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ultricies leo ipsum, quis dapibus mi dignissim vitae. Nunc tristique luctus fermentum. Cras vehicula scelerisque libero, eget cursus tortor imperdiet eu. Sed imperdiet semper nibh, ac bibendum velit sodales ut.</p>
    </div>
    <div id="three">
        <h1>Div Three</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ultricies leo ipsum, quis dapibus mi dignissim vitae. Nunc tristique luctus fermentum. Cras vehicula scelerisque libero, eget cursus tortor imperdiet eu. Sed imperdiet semper nibh, ac bibendum velit sodales ut.</p>
    </div>
</article>
</body>
</html>

The code above is rendered as follows: