UI Design: An Intro to Flexible Box

In a previous post, we have discussed that HTML elements are essentially a “box”. Traditionally, when we position those boxes, whether to the right or to the left, we use the float property.

.main {
	float: left;	
}
.sidebar {
	float: right;
}

There is one certain downside when we apply this technique, the direct parent element of .main and .sidebar will collapse as illustrated below.

Thus, we mostly need to apply CSS clearfix to the parent to counter the effect.

Flexible Box Module

Since this is now becoming a common practice in web design, W3C announced a new module called Flexible Box or simply Flexbox. But, this module is still in the drafts stage and there has been several changes over the years.

At the time of the writing, this module is only fully supported in Chrome 22 (with prefix) and Opera 12.1, according to CanIUse.com. All right, let’s see how this module works.

To demonstrate this new CSS3 feature, we will prepare the HTML structure. We have a div that is containing two other div, like so.

<div class="cf">
	<div class="col left">
		<p>Pastry icing sweet roll fruitcake croissant. Tart wypas tiramisu marshmallow 
		marshmallow sweet roll. Cheesecake bear claw pudding bonbon sweet roll powder carrot cake. 
		Cake sweet donut tart.</p>
	</div>
	<div class="col right">
		<p>Dessert gummies sweet roll. Dessert gummi bears soufflé cotton candy icing.
		Lollipop wafer lemon drops toffee chocolate.</p>
	</div>
</div>

Let’s just assume that the left column is the main content section and the right column is the sidebar. So that, as you can see, we add more (random) content to the left column rather than to the right column.

As we have mentioned above; in a traditional way, we will do something like this in the stylesheet for positioning the column. We float the column, specify the proper width as well as include the CSS clearfix, like so.

.cf:before,
.cf:after {
    content: "";
    display: table;
}
.cf:after {
    clear: both;
}
.cf {
    *zoom: 1;
}
.old .col {
	float: left;
}
.old .left {
	width: 310px;
}
.old .right {
	width: 210px;
}

As expected, here is how the result looks like.

With Flexbox module it becomes much simpler. Technically, we simply need to set the parent’s display to flex.

.flex {
	display: -webkit-flex;
	display: flex;
}

Interestingly, this will also determine the proper width for the div inside without us specifying it explicitly in the stylesheet and this is how it turns out.

Furthermore, we can also set flexbox to the child element. In the following example, we apply it to the left column.

Now, since we have two paragraphes inside it, they will also be divided, as shown below.

The Syntax

There are actually more syntax included in Flexible box module, but as we mentioned earlier in this post, they have been changing over the years. For example, in 2009 the specification said display: box, then in 2011 it changed to display: flexbox. So, I think we better wait until this module is settled, before we implement it wildly on our websites.

via hongkiat.com http://www.hongkiat.com/blog/ui-design-an-intro-to-flexible-box/

Photoshop CS6 Download