Lets talk about whats going on in the CSS above. In order to make our .container element a flex container, we need to declare it as so. We can accomplish that with the {display:flex;} property seen on line 2 above.

Once we apply this property to our blue parent container, it will now be considered a flex container. Any elements that are inside of this flex container will now be considered flex items. Flex items will by default be aligned to the left of the flex container, and in a row.

Note: The row value is the default value of the {flex-direction} property. Wewill go over this property in a bit more detail a little further down.

Here is what we will get after applying {display: flex;} to our blue parent container:

You can see by the above example that with {display: flex;} we get a nice horizontal row of our child element boxes, aligned to the left. By simply using a single line of CSS, we were able to create a responsive flex container and simultaneously horizontally align the child elements inside of it into a row.

Controlling the Flex Direction

Lets keep this train moving and go a little deeper into this. So we already know how to flex a parent container, but now you need to know how to alter the direction of the flex items. As mentioned prior, flexbox is multi-directional so that means we can go up, down, right, left, and even in reverse. Here is how we can accomplish that.

{flex-direction: row;}

The {flex-direction} property defaults to row, so there is no need to declare it initially. This is what that looks like:

{display: flex;} will set the flex-direction property to row by default.

{flex-direction: row-reverse;}

Above I briefly mention that you can reverse the flex direction. This will align your flex items to the end of the flex container, but it will also reverse their order. Take note of the numbers on the boxes. To do this, simply use {flex-direction: row-reverse;} on your flex container.

{flex-direction: column;}

If you want your flex items to be displayed vertically, we can make use of the {flex-direction: column} property to make our flex container align all of its children in a column.

{flex-direction: column;}

{flex-direction: column-reverse}

Just like with the row, we can also reverse the direction of our column. To do that, all we need to do is apply {flex-direction: column-reverse} to our flex container. Take note of where the #1 box is now.

{flex-direction: column-reverse;}

Aligning and Centering Flex Items

Thankfully, aligning and centering items with flexbox is simple. I repeat, aligning and centering items is simple! There are two properties we will make heavy use of to align flex items:

{justify-content}

This property will tell the browser how to distribute space between and around flex items along the main axis of the flex container. It does not change the order of the flex items.. Take note of all of the order of the numbers on the boxes in the following examples. There are 7 total values that can be used on this property.

{justify-content: center;}

The flex items will be placed in the center of the flex container.

{justify-content: center;}

{justify-content: flex-start;}

The flex items will be aligned at the begging of the flex container.

{justify-content: flex-start;}

{justify-content: flex-end;}

The opposite of flex-start, the flex-end value will let flex items be aligned at the end of the flex container.

{justify-content: flex-end;}

{justify-content: space-between;}

This value will space out the flex items with equal space in between all of them.

{justify-content: space-between;}

{justify-content: space-around;}

The space-around value will space out the flex items with equal space around all of them.

{justify-content: space-around;}

{justify-content: initial;}

Sets the {justify-content} property to it’s default value.

{justify-content: inherit;}

The inherit value specifies that the {justify-content} property should inherit its value from it’s parent element.