Popular posts

Let me help you understand CSS3 Flexbox properly. To start with, forget everything that you have heard or learnt till now. This is important because you might have read things like poor cross browser compatibility, browser prefixes and other similar stuff.

Think of CSS3 Flexbox as the new way to create layouts for your websites. If you have ever used CSS Frontend frameworks like Bootstrap, Foundation etc you might have come across the concept called Grid System. Grid System lets you create grid boxes by using columns and rows.

With CSS3 Flexbox, you can create similar rows and columns very easily. You don't have to write 3-4 different hierarchies of HTML <div> elements to create responsive layouts. Let me show you a basic example of how you can use Grid system and create simple layout.

3 Column Layout using Flexbox

Following is the HTML markup that I will use:

<div class="container">
  <div class="column">
  </div>
  <div class="column">
  </div>
  <div class="column">
  </div>
</div>

Now, we have one parent container .container and 3 child elements .column. We will set the height and width of the parent container as following:

CSS:

.container{
	height: 800px;
	width: 100%;
	background: #ECEFF1;
}

Every Flexbox layout needs a parent container. This container should have the display property set to flex. In our case, this container is the parent div element with class .container. Hence, we need to modify the above CSS rule as following:

.container{
	height: 800px;
	width: 100%;
	background: #ECEFF1;

	display: flex;
}

Next, we have to tell the browser that all the child elements inside this container should be arranged side by side. This is done using the property flex-direction.

.container{
	...
	display: flex;
	flex-direction: row; 
}

That's it! We are done with the parent container. It's time to make the child elements look like columns. The CSS rule for it is as following:

.column{
	height: 100%;
	background: #90A4AE;
	margin-left: 20px;
	margin-right: 20px;
}

You won't see anything after adding the above CSS. This is because we haven't specified the width each column. Flexbox has a property which defines the width of the child elements. This property is called flex-grow. Since we need 3 columns of equal width, we will set flex-grow to 1. If you want to make any column twice as large as the others then set the value to 2.

.column{
	...
	flex-grow: 1;
}

Here's how this 3 column layout looks in the browser.

Here's a CodePen demo.

Now, let's talk about compatibility. As CSS3 Flexbox properties are new, we will have to add vendor prefixes for every property. We can't expect everyone to remember these prefixes. Hence, I prefer to use a handy tool called Pleeease Play. Just put any property in this tool and you will get the vendor prefixes generated automatically for you. :)

As always, you can refer to A Complete Guide to Flexbox by Chris Coyier.