Tuesday, 20 August 2013

Flexbox (old) bound two elements to each side

Flexbox (old) bound two elements to each side

Is there any possibility to recreate the justify-content: space-between
for the browsers who use the old Flexbox spec (in my case mobile
browsers)? I needed to align two elements: One to the left and the second
to the right side but without any floats but preferable with Flexbox.
With the new flexbox it's easily possible:
<div class="two-columns">
<span>1</span>
<span>2</span>
</div>
CSS:
div {
display: -moz-flex;
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-between;
justify-content: space-between;
}
div span {
background: green;
display: inline-block;
color: white;
padding: 20px 30px;
}
http://jsfiddle.net/R8bbz/1/

No comments:

Post a Comment