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-contentandalign-itemscan only be used when the display of an element is set toflex,gridor 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-contentWORKS WITH THE FLOW ANDalign-itemsSIMPLY DOES THE OPPOSITE.
flex-direction: row-HORIZONTAL flow-HORIZONTAL directionforjustify-content-VERTICAL directionforalign-items
flex-direction: column-VERTICAL flow-VERTICAL directionforjustify-content-HORIZONTAL directionforalign-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