How can I master CSS3 Flexbox?

I am quite new to learning CSS3 properties and I am stuck with Flexbox. Can someone please explain me the concepts behind Flexbox in simple words?

Start a personal dev blog on your domain for free and grow your readership.

3.4K+ developers have started their personal blogs on Hashnode in the last one month.

Write in Markdown 路 Publish articles on custom domain 路 Gain readership on day zero 路 Automatic GitHub backup and more

Syed Fazle Rahman's photo

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.

3 Columns Layout using CSS Flexbox

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.

Benedikt Sattler's photo

There is a great series of short videos from Wes Bos called What the Flexbox which are a great introduction into Flexbox. Especially when it comes to the concepts of Flexbox.

He goes from simple introduction into more details. He also uses the already twice referenced css-tricks article to show what to look for if you want a certain behaviour, and don't know exactly what Flexbox property does it.

Here you find the microsite or just go for the youtube playlist. The videos 1-12 will get you going in Flexbox, the rest are some examples and tips which will give you a good understanding of the capabilities of Flexbox.

Remco's photo

I was looking at this article the other day and it helped me a lot. Hope it works for you too.

Robert van der Elst's photo

I use this as my documentation ;)

WaldoJeffers's photo

The answers provided in this thread are a great start ! You can also checkout A visual guide to CSS 3 Flexbox properties by Dimitri Stojanov, I think he did a great job explaining how each property works ! Once you get your head around the concepts, I think you'll fall in love ;)