Flexbox, you are the next!

Time has come to get rid of the complexity of layouting with float and position properties, its the turn for flexbox. We are able to create more complex layouts with float, position properties, plus a little bit of javascript. But the complexity to implement it in the wide variety of browsers is also awful. Flexible box or in short, flexbox is the property in CSS which make the layout model much easier.

Technically flexbox is not a new concept, but it has got a remarkable evolution over the past few years. The problem still persist with flexbox is the browser compatibility. With the support of CSS3, flexbox may take some time to get support across browsers; even though if we combine both “old” and “new” flexboxes together, we can accomplish a decent browser support. There are mainly 3 versions:

  • 2009 : display: box; and properties as box-{*}
  • 2011: display: flexbox; and flex() function
  • current: display: flex; and flex-{*}
Version Firefox Chrome Opera Safari IE
New  21+ (-webkit-)  12.10+  11?
Mid  10 (-ms-)
Old  3+ (-moz-)  <21 (-webkit-)  3+ (-webkit)

Compatibility table for support of Flexible Box Layout Module in desktop and mobile browsers.

I. Flexbox Properties:

Let’s have an example:

HTML:
<div class="container">
    <nav class="box1">Box1 contents</nav>
    <article class="box2">Box2 contents</article>
    <aside class="box3">Box3 contents</aside>
</div>
CSS:
.container           { padding: 2em }
.box1, .box2, .box3 { padding: 1em }

This snippet doesn’t have any float or position properties. Let’s layout it with flexbox.  

1. Display Property

For the child elements box1, box2, box3 to arranges inside the container with flexbox, the parent tag need to set the display property.


<table border="1"><tbody><tr><th>Version</th><th>Property</th><th>Block-level flex</th><th>Inline-level flex</th></tr><tr><td>New</td><td>display</td><td>flex</td><td>inline-flex</td></tr><tr><td>Mid</td><td>display</td><td>flexbox</td><td>inline-flexbox</td></tr><tr><td>Old</td><td>display</td><td>box</td><td>inline-box</td></tr></tbody></table>

box 1 contents
box 2 contents
box 3 contents

2. Orientation of flexbox axis


<table border="1"><tbody><tr><th>Version</th><th>Property</th><th>Horizontal</th><th>Reversed horizontal</th><th>Vertical</th><th>Reversed vertical</th></tr><tr><td>New</td><td>flex-direction</td><td>row</td><td>row-reverse</td><td>column</td><td>column-reverse</td></tr><tr><td>Mid</td><td>flex-direction</td><td>row</td><td>row-reverse</td><td>column</td><td>column-reverse</td></tr><tr><td>Old</td><td>box-orientbox-direction</td><td>horizontalnormal</td><td>horizontalreverse</td><td>verticalnormal</td><td>verticalreverse</td></tr></tbody></table>

box 1 contents
box 2 contents
box 3 contents

3. Sizing


<table border="1"><tbody><tr><th>Version</th><th>Property</th><th>Value</th></tr><tr><td>New</td><td>flex</td><td><number></td></tr><tr><td>Mid</td><td>flex</td><td><number></td></tr><tr><td>Old</td><td>box-flex</td><td><number></td></tr></tbody></table>

box 1 contents
box 2 contents
box 3 contents

4. Ordering


<table border="1"><tbody><tr><th>Version</th><th>Property</th><th>Value</th></tr><tr><td>New</td><td>Order</td><td><number></td></tr><tr><td>Mid</td><td>flex-order</td><td><number></td></tr><tr><td>Old</td><td>box-ordinal-group</td><td><integer></td></tr></tbody></table>

box 1 contents
box 2 contents
box 3 contents

5. Horizontal Align


<table border="1"><tbody><tr><th>Version</th><th>Property</th><th>Start</th><th>Center</th><th>End</th><th>Justify</th><th>Distribute</th></tr><tr><td>New</td><td>justify-content</td><td>flex-start</td><td>center</td><td>flex-end</td><td>space-between</td><td>space-around</td></tr><tr><td>Mid</td><td>flex-pack</td><td>start</td><td>center</td><td>end</td><td>justify</td><td>distribute</td></tr><tr><td>Old</td><td>box-pack</td><td>start</td><td>center</td><td>end</td><td>justify</td><td>–</td></tr></tbody></table>

Start

box 1 contents
box 2 contents
box 3 contents

Center

box 1 contents
box 2 contents
box 3 contents

End

box 1 contents
box 2 contents
box 3 contents

6. Vertcal Align


<table border="1"><tbody><tr><th>Version</th><th>Property</th><th>Start</th><th>Center</th><th>End</th><th>Baseline</th><th>Stretch</th></tr><tr><td>New</td><td>align-items</td><td>flex-start</td><td>center</td><td>flex-end</td><td>baseline</td><td>stretch</td></tr><tr><td>Mid</td><td>flex-align</td><td>start</td><td>center</td><td>end</td><td>baseline</td><td>stretch</td></tr><tr><td>Old</td><td>box-align</td><td>start</td><td>center</td><td>end</td><td>baseline</td><td>stretch</td></tr></tbody></table>

Start

box 1 contents
box 2 contents
box 3 contents

Center

box 1 contents
box 2 contents
box 3 contents

End

box 1 contents
box 2 contents
box 3 contents

Baseline

box 1 contents
box 2 contents
box 3 contents

Stretch

box 1 contents
box 2 contents
box 3 contents

7. Wrapping


<table border="1"><tbody><tr><th>Version</th><th>Property</th><th>No wrapping</th><th>Wrapping</th><th>Reversed wrapping</th></tr><tr><td>New</td><td>flex-wrap</td><td>nowrap</td><td>wrap</td><td>wrap-reverse</td></tr><tr><td>Mid</td><td>flex-wrap</td><td>nowrap</td><td>wrap</td><td>reverse-wrap</td></tr><tr><td>Old</td><td>box-lines</td><td>single</td><td>multiple</td><td>–</td></tr></tbody></table>


II. Holy Grail Layout with Flexbox

One of the difficult problems in CSS - the holy grail layout - can be done amazingly easier with flexbox method. Here is a sample (with good browser compatibility).

HTML:
<header>Header</header>
<div class="container">
    <article class="box1">
        Article contents<br/ >( Box 1 )
    </article>
    <nav class="box2">
        Navbar contents<br/ >( Box 2 )
    </nav>
    <aside class="box3">
        Sidebar contents<br/ >( Box 3 )
    </aside>
</div>
<footer>Footer</footer>
CSS:
*{
	margin: 0;
	padding: 0;
}
body{
	padding: 2em;
	background-color: #6D899F;
}
header, footer{
	background-color: #FFFFFF;
	padding: 1em;
}
.container{
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;

	width: 100%;
}
.box1{
	-webkit-box-ordinal-group: 2;
	-moz-box-ordinal-group: 2;
	-ms-flex-order: 2;
	-webkit-order: 2;
	order: 2;

	-webkit-box-flex: 3;
	-moz-box-flex: 3;
	-webkit-flex: 3;
	-ms-flex: 3;
	flex: 3;

	background-color: #BCD39B;
}
.box2{
	-webkit-box-ordinal-group: 1;
	-moz-box-ordinal-group: 1;
	-ms-flex-order: 1;
	-webkit-order: 1;
	order: 1;

	-webkit-box-flex: 1;
	-moz-box-flex: 1;
	-webkit-flex: 1;
	-ms-flex: 1;
	flex: 1;

	background-color: #CE9B64;
}
.box3{
	-webkit-box-ordinal-group: 3;
	-moz-box-ordinal-group: 3;
	-ms-flex-order: 3;
	-webkit-order: 3;
	order: 3;

	-webkit-box-flex: 1;
	-moz-box-flex: 1;
	-webkit-flex: 1;
	-ms-flex: 1;
	flex: 1;

	background-color: #62626D;
}
.box1, .box2, .box3{
	padding: 1em;
}

/* mobile layout */
@media (max-width: 480px){
	.container{
		display: -webkit-box;
		display: -moz-box;
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;

		width: 100%;

		-webkit-box-orient: vertical;
		-moz-box-orient: vertical;
                -ms-flex-orient: vertical;
                -webkit-orient: vertical;
                orient: vertical;
	}
	.box2{
		-webkit-box-ordinal-group: 2;
		-moz-box-ordinal-group: 2;
		-ms-flex-order: 2;
		-webkit-order: 2;
		order: 2;	}
	.box1{
		-webkit-box-ordinal-group: 1;
		-moz-box-ordinal-group: 1;
		-ms-flex-order: 1;
		-webkit-order: 1;
		order: 1;
	}
	.box3{
		-webkit-box-ordinal-group: 3;
		-moz-box-ordinal-group: 3;
		-ms-flex-order: 3;
		-webkit-order: 3;
		order: 3;
        }
}

See the Pen Holy Grail Layout with Flexbox by Praseetha KR (@Praseetha-KR) on CodePen

So, Flexbox, you are the next!

blog comments powered by Disqus