CSS Flex property
is a widely adopted and used property by front end developers nowadays. You almost cannot do without it. It's associate is the CSS Grid Property
which is used most times alongside.
Personally, I use flex
to the point that, if flex
were to be human, I'd probably be cursed already, π
You could check out my blog - dillionmegida.com for desktop & mobile view. Yes, it was all flex
.
Although I do not use grid
that much, or maybe, not yet.
Enough with your story already π
justify-content & align-items
This article is written with the intention of ensuring effective use of the two properties in the title (particularly on the first try), therefore, prior knowledge of CSS Flex
is required.
Read on CSS Flex here
justify-content
andalign-items
can only be used when the display of an element is set toflex
,grid
or some other values.
I'd be using the display of flex
Using these two properties can be confusing as it's difficult knowing when to use which one or the other. If you have attempted using flex before, you'd have come across this issue (as it seems to be). I hope to at the end of this article, help you attain an efficient understanding of these (often used) properties of flex and also, help you get the exact use at your first try. Shall we? π€
π» ...
Like I said, it requires the flex display value
....
element {
display: flex;
}
....
I want to believe that we currently understand flex
.
element {
display: flex;
justify-content: flex-start|flex-end|center|space-between|space-around|space-evenly;
align-items: flex-start|flex-end|center|stretch|baseline;
}
When an element's display is set as flex, the default direction is 'row'.
It could also be set to row manually.
element {
display: flex;
flex-direction: row;
}
I'd refer to this as the horizontal flow
.
When justify-content
is used on a horizontal flow, it aligns the elements along the horizontal direction.
When align-items
is used on a horizontal flow, it aligns the elements along the vertical direction.
You could read more on associated flex property values (such as flex-start
, flex-end
).
I do not want to deviate from the aim of this article so I won't be explaining the use of those terms.
I want to ensure the adequate decision of when to use these properties.
Now, when an element's flex direction
is set to column
, the flow changes.
It possesses another flow which I would refer to as the vertical flow
When justify-content
is used on a vertical flow, it aligns the elements the other way round - along the vertical direction. Therefore, all values set for it will only work in this direction.
When align-items
is used on a vertical flow, it aligns the elements along the horizontal direction. Hence, all values set for it will only work in this direction.
The two properties just switched jobs as the direction was changed.
The flow terms I used (vertical flow
and horizontal flow
) were just silly names invented by me π, there are official (or rather, professional) terms for that - Cross Axis and Main Axis
The secret is simple.
THE
justify-content
WORKS WITH THE FLOW ANDalign-items
SIMPLY DOES THE OPPOSITE.
flex-direction: row
-HORIZONTAL flow
-HORIZONTAL direction
forjustify-content
-VERTICAL direction
foralign-items
flex-direction: column
-VERTICAL flow
-VERTICAL direction
forjustify-content
-HORIZONTAL direction
foralign-items
That's it π, I know right π², that simple.
I use flex almost all the time, in designing galleries, arranging elements and especially when I want to center any element in another element. text-align: center
& margin: auto
tend to center items only in some cases but with the power flex β οΈ, I can center anything I want.
I simply do this;
.parent-element {
display: flex;
justify-content: center;
align-items: center;
}
With these simple settings, all elements under the .parent-element
class will be centered vertically and horizontally.
I hope by now you can easily decide between - and how to effectively use - justify-content
& align-items
π
Helpful resource - Aligning Items in a Flex Container
Thanks for reading.
Kindly share your reviews.
Top comments (2)
Thanks Dillon, that does make sense. I wish I had this article two weeks ago!
You have it now : )
Thanks for the compliment