flex-simple-boxes

by shyamh

HTML

<h1>CSS3 Flexible layout test</h1>

<div style="display: flex; background-color:#f9f9f9">
    <div class="content-with-flex">Many designers will find the flexbox model easier to use. Child elements in a flexbox can be laid out in any direction and can have flexible dimensions to adapt to the display space. Positioning child elements is thus much easier, and complex layouts can be achieved more simply and with cleaner code, as the display order of the elements is independent of their order in the source code. This independence intentionally affects only the visual rendering, leaving speech order and navigation based on the source order.</div>
    <div class="content-with-flex">Though CSS Flexible Boxes Layout specification is at the Candidate Recommendation stage, not all browsers have implemented it. WebKit implementation must be prefixed with -webkit; Internet Explorer implements an old version of the spec, prefixed; Opera 12.10 implements the latest version of the spec, unprefixed. See the compatibility table on each property for an up-to-date compatibility status.</div>
</div>
<hr />
<div style="float: left;" class="content-with-block">Many designers will find the flexbox model easier to use. Child elements in a flexbox can be laid out in any direction and can have flexible dimensions to adapt to the display space. Positioning child elements is thus much easier, and complex layouts can be achieved more simply and with cleaner code, as the display order of the elements is independent of their order in the source code. This independence intentionally affects only the visual rendering, leaving speech order and navigation based on the source order.</div>
<div style="float: right;" class="content-with-block">Though CSS Flexible Boxes Layout specification is at the Candidate Recommendation stage, not all browsers have implemented it. WebKit implementation must be prefixed with -webkit; Internet Explorer implements an old version of the spec, prefixed; Opera 12.10...

CSS

body {
    font-family:"Tahoma";
    line-height: 1.5em;
}
.content-with-flex {
    width: 360px;
    margin: 15px;
}
.content-with-block {
    width: 360px;
    margin: 15px;
}