Flexbox, you are 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.

Version	Property	Block-level flex	Inline-level flex
New	display	flex	inline-flex
Mid	display	flexbox	inline-flexbox
Old	display	box	inline-box

box 1 contents

box 2 contents

box 3 contents

2. Orientation of flexbox axis

Version	Property	Horizontal	Reversed horizontal	Vertical	Reversed vertical
New	flex-direction	row	row-reverse	column	column-reverse
Mid	flex-direction	row	row-reverse	column	column-reverse
Old	box-orientbox-direction	horizontalnormal	horizontalreverse	verticalnormal	verticalreverse

box 1 contents

box 2 contents

box 3 contents

3. Sizing

Version	Property	Value
New	flex	<number>
Mid	flex	<number>
Old	box-flex	<number>

box 1 contents

box 2 contents

box 3 contents

4. Ordering

Version	Property	Value
New	Order	<number>
Mid	flex-order	<number>
Old	box-ordinal-group	<integer>

box 1 contents

box 2 contents

box 3 contents

5. Horizontal Align

Version	Property	Start	Center	End	Justify	Distribute
New	justify-content	flex-start	center	flex-end	space-between	space-around
Mid	flex-pack	start	center	end	justify	distribute
Old	box-pack	start	center	end	justify	–

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

Version	Property	Start	Center	End	Baseline	Stretch
New	align-items	flex-start	center	flex-end	baseline	stretch
Mid	flex-align	start	center	end	baseline	stretch
Old	box-align	start	center	end	baseline	stretch

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

Version	Property	No wrapping	Wrapping	Reversed wrapping
New	flex-wrap	nowrap	wrap	wrap-reverse
Mid	flex-wrap	nowrap	wrap	reverse-wrap
Old	box-lines	single	multiple	–

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

css web