Flexbox Container Properties

The flexbox has a flex-container which is also known as parent container. This container holds all the flex-items inside it. In this tutorial we will go through all the flex properties related to flex container.

Remember that these properties will be applied directly to the flex container and not on the flex-items. Let's get through them one by one.

CSS Display Flex

To start using Flexbox, the first thing to add is the property display:flex; in the parent container. Just after you add this property, your parent container will become a flex-container and all of its child will become flex-items. These flex-items will by-default align themselves in a row.

Divs are block level-elements so they take up all horizontal space available and the next div automatically get inserted on a new line. But, by using display:flex;, Divs leave their default behaviour and get aligned one after another in a horizontal line. Let's see the example below:

Output

CSS Flex Direction

After setting up the container as Flexbox, the browser by-default uses the row direction for the flex-items, i.e., items get placed from left to right. But, what if we want to change the direction?

CSS Flex direction property makes it possible to display the flex-items as we want. They can be aligned in a horizontal row, in a vertical column, in a row reverse direction or in a column reverse direction. Let's see them one by one:

• flex-direction:row; - It is the default property. It place flex-items from left to right in a row.
• flex-direction:column; - It place the flex-items from top to bottom in a column.
• flex-direction:row-reverse; - It places items from right to left and it also reverses the order of flex-items. The first item will be added last and vice versa.
• flex-direction:column-reverse; - As the name suggests, it will place items from bottom to top and also but in a reverse order.

Let's see all the properties in an example:

Output

CSS Flex Wrap

Flex Wrap is a very useful property in case of overflow of content. By default, CSS Flexbox tries to fit all the elements in a single row, it can result into overflow of content outside of the flex-container.

Flex Wrap property automatically places the flex-items in the next row, when they don't fit in a single row. There are three values which you can give to this property:

• Flex-wrap: Wrap; - It activates the Wrap property. Now, all the overflown content will slip into next row and out of the container.
• Flex-wrap: Wrap-reverse; - It also wraps the content but all the flex-items will be wrapped in a reverse order.
• Flex-wrap: Nowrap; - It is the default value, flex-items won't get wrapped.

Output

CSS Flex Flow (Shorthand property)

CSS Flex Flow property is a shorthand property in which we can combine both Flex-direction and Flex-Wrap properties. We can give the values for both the properties just by separating them with a space.

Let's take a loot at the example:

Output

Justify Content of a Row in CSS Flexbox

Justify Content property is used when you want to align the flex-items to be displayed in a particular manner along the row(main axis). It horizontally aligns the item as specified. It justifies the extra horizontal space present in a row. For example, It can place items at the start, end or center and it can also manipulate the space around the flex-items.

There are different values that you can set to justify content:

• justify-content:flex-start; - It places the flex-items at the starting of the flex(along the main axis), i.e., extreme left.
• justify-content:flex-end; - It places the flex-items at the ending of the flex(along the main axis), i.e., extreme right.
• justify-content:center; - It simply place the items in the center of the row. This property along with align-items:center; is very useful in centering the content within a flex-container.
• justify-content:space-between; - It is a very useful property when there is some extra space left in a row. It equally distribute the extra space in-between the flex-items. The first and last item gets placed at left and right ends respectively and then the space gets distributed between them. Look at the example to clarify its concept.
• justify-content:space-around; - This property will distribute equal amount of space to both left and right side of a flex-item.

Let's see all the properties in an example:

Output

Align Items in CSS Flexbox

Align Items positions the flex-items along the vertical space(cross axis). If there is some vertical space left around the flex-items, then that space can be justified by using align-items property. It works same as justify-content but in cross axis.

There are different values that you can set to align-items:

• align-items:flex-start; - It places the flex-items at the starting of the flex(cross axis, vertically).
• align-items:flex-end; - It places the flex-items at the ending of the flex, i.e., at the bottom of the container.
• align-items:center; - It aligns all the items in the center of the cross axis.
• align-items:baseline; - This property aligns all the flex items on their baselines. The center point of all the flex-items would be on a same straight line. It will get cleared in the example.
• align-items:stretch; - This will stretch all the flex-items' height to fill all the available vertical space. Remember that for stretch to work, the height of the flex-items should be set to auto.

Let's see the example below:

Output

Align-Content of a column in CSS Flexbox

Align-content is similar to justify-content but it works on the cross axis(vertical axis). It will align the items on the vertical axis, if, there is some extra space left. It is a little bit different than previous properties, there are some conditions that should be met, for it to work:

• There property flex-flow should be set to wrap or wrap-reverse.
• There should be multiple rows. It doesn't show any effect on a single row.

So, it is clear from the above conditions that this property will only work when the flex-flow:wrap/wrap-reverse gets engaged, otherwise not.

There are different values that can be set to align-content:

• align-content:flex-start; - It places the flex items at the starting of the cross axis(vertical).
• align-content:flex-end; - It aligns the flex-items at the end of the cross axis, i.e., bottom.
• align-content:center; - All the items gets aligned in the center.
• align-content:space-around; - This property will distribute equal amount of space to both top and bottom side of a flex-items.
• align-content:space-between; - It equally distribute the extra vertical space in-between the flex-items.
• align-content:stretch; - This property will stretch the height of all the flex-items to fill-up the extra space present inside the container. Remember to use height:auto; on flex-items for this property to show effect./li>

Let's take a look at the example:

Output

This is the end for the flex container properties. In the next tutorial of flexbox, we will look at some more properties related to flex-items. Click on Next.