CSS Flexbox #2. How to Use the justify-content Property

The justify-content property specifies how flex-items are distributed along the main axis of their parent flex-container. This property has 5 different possible values:

flex-start (default)
flex-end
center
space-around
space-between

The main axis of the flex-container will be determined, based on the value of the flex-direction property, as you learned in the first tutorial of this series.

The main axis will be determined based on the value of the flex-direction

Once again, the justify-content property acts directly on the flex-items inside the container. We are going to take a look at all the possible values with an example.

Step # 1. Create the HTML

Open your preferred code editor.
Create an empty HTML file.
Visit this page, copy the HTML code and save the file.

Step # 2. The CSS Styles

Create a CSS file called style.css, the link to the file is already in the tag of your HTML file
Copy and paste this code:

/* GLOBAL STYLES */

* { box-sizing: border-box; } body { background-color: #AAA; margin: 0px 50px 50px; } .item { padding: 2rem; border: 5px solid #87b5ff; border-radius: 3px; font-size: 2em; font-family: sans-serif; font-weight: bold; background-color: #1c57b5; }

Step #3. The CSS Flexbox Styles

Edit the style.css file:

.container { display: flex; background-color: #f5ca3c; }

The parent container has turned into a flex-container. The 3 children elements are now flex-items. The default values for flex-direction and justify-content are row and flex-start respectively so you won’t see any changes in the layout when adding these properties. The main axis runs from left to right, whereas the cross (secondary) axis runs from top to bottom.

Edit the CSS code:

.container { display: flex; background-color: #f5ca3c; flex-direction: row; justify-content: flex-start; }

Now change the value of the justify-content property to flex-end.

Edit the CSS code:

.container { display: flex; background-color: #f5ca3c; flex-direction: row; justify-content: flex-end; }

The flex-items are now placed at the end of the flex-container. The items run from left to right (flex-direction: row).

In order to center the items within the flex-container, you have to change the value of the justify-content property.

Edit the CSS code:

.container { display: flex; background-color: #f5ca3c; flex-direction: row; justify-content: center; }

The items are now perfectly centered along the main axis of their parent container.

Change the value of the justify-content property once again.

Edit the CSS code:

.container { display: flex; background-color: #f5ca3c; flex-direction: row; justify-content: space-between; }

The available space is distributed between each one of the flex-items, so they are as far away from each other as possible, considering the full width of the container.

Edit the CSS code once again:

.container { display: flex; background-color: #f5ca3c; flex-direction: row; justify-content: space-around; }

In this case, the available space is distributed around the flex-items, so there is an even amount of space to the left and right of each flex-item.

The flex-direction property determines whether the flex-items are distributed along the inline (row) or block (column) axis. To see the behavior of the items on the block axis, make a few changes in the code.

Edit the CSS file:

.container { display: flex; background-color: #f5ca3c; flex-direction: column; justify-content: space-around; }

The flex-items behave now like block elements. That means they are as high as the content inside them. The same applies to the flex-container. In order to see how the justify-content property works on the block axis, you have to declare a height value for the flex-container.

Edit the CSS code:

.container { display: flex; background-color: #f5ca3c; flex-direction: column; justify-content: space-around; height: 90vh; }

Now you can test the different values of the justify-content property on the block axis.

I hope you liked this tutorial. Stay tuned for more CSS Flexbox content.

Author

Jorge Montoya

Jorge lived in Ecuador and Germany. Now he is back to his homeland Colombia. He spends his time translating from English and German to Spanish. He enjoys playing with Drupal and other Open Source Content Management Systems and technologies.
View all posts

Hi Paul, unfortunately, no. You can spin one up by going to https://rodsurl.com/startersite - but this will just open it…

I learned a lot from the Layout Builder for the Ambitious Site Builder course. Thank you so much for such…

Hey Methawee - as we talked about offline - Paragraphs is tough when it gets nested several levels deep. I…

Hey Kathryn - yeah - me too! Here's my take on it - It's at least 8 months to an…

While Dries was talking, I was thinking of your presentation at Florida Drupalcamp (I watched it and built a site…

Step # 1. Create the HTML

Step # 2. The CSS Styles

Step #3. The CSS Flexbox Styles

More tutorials of this series

Author