Perfect understanding of align-items, align-content and justify-content in FlexBox with examples: Part 2

In the previous article, we learnt about align-items property and briefly talked about align-content and justify-content properties. 

In this article we will talk about justify-content and we will see how similar it is to align-items.

The justify-content property

Basically justify-content aligns individual items inside a flex container along the main axis.

 Therefore what this means is in a flex container with the default flex-direction of row it will align items in the horizontal axis. Also in a column flex direction it aligns them in vertical axis which is the main axis in this case. This is the syntax:

.container {  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;}

Align items using justify-content in flex-direction: row

Have a look at this pen that shows justify-content with all its values:

Firstly just like align-items we have flex-start and flex-end and center with same functionality. The only difference is justify-content does work in main axis ( here horizontal):

common values of justify-content and align-items (row direction)

But we have three new values which are all starting with space as they define how the space is distributed between itms.

The space-between divides the available space inside container in the main axis in between items and remove space from the start and end of the container. So there is no space between the first and last item with the container.

The space-around divides the space around all items. Space-around adds the same amount of space on each side to all items but in this case first and last item will have half space of the other items as they don’t have any other item in one of their sides. 

The space-evenly which is fairly new adds the exact amount space for all items including first and last items:

space values of justify-content property

As a result justify-content property aligns items in the main axis with six different values that could be used in various cases.

Therefore as an example and as we explained here we can perfectly centre an element in both axis using align-items: center; and justify-content: center; in a FLexBox container.

Align items using justify-content in flex-direction: column

Similar rules apply to this property in a column flex-direction. But the difference is the main axis here is the vertical axis. Therefore the items will be aligned along this axis:

Remember that in this case flex-direction is column. So the items will be centred along the vertical axis. Also flex-start and flex-end will align items on top and bottom of the container as below:

column direction with flex-start , flex-end and center values

Additionally the space values will distribute the free space of the container along the main axis which is vertical axis here. Accordingly we will have the expected result:


space values in justify-content in column direction

As we learnt justify-content is the equivalent version of align-items in main axis. It divides the remaining space between all flex items as per its value.

In the next article we will learn about align-content which is the equivalent version of justify-content but in cross axis (in terms of values) and we can use it only for flex containers with more that one line of items. (wrapped flex container).

Thank you for reading.

© 2020
Azadeh Faramarzi

This site is created and maintined by Azadeh Faramarzi , A passionate developer, sport and code lover who loves to share and write when she has some time.