Course Content
CSS Fundamentals
CSS Fundamentals
Justifying Content Horizontally
The justify-content
property is instrumental in determining the position of flex items along the main axis. Its default value is flex-start
.
Let's consider each case on practice. We will play with the list of cards.
flex-start
Default value, which makes all the items be at the start of the main axis.
index
index
index
flex-end
All items are at the axis end.
index
index
index
center
All items are in the center.
index
index
index
space-around
It distributes all the items evenly along the main axis with a bit of space left at either end.
index
index
index
space-between
It is very similar to space-around
except that it doesn't leave any space at the axis on both ends.
index
index
index
Everything was clear?