DEV Community

loading...
Cover image for What is the difference between aligning and justifying items/content in CSS?

What is the difference between aligning and justifying items/content in CSS?

leviathanprogramming profile image 𝐋𝐄𝑽𝐈𝑨𝐓𝐇𝐀𝐍 Programming ・1 min read

I don't know the exact differences of four different aligning and justifying CSS techniques:

  • align-content:center;
  • align-items:center;
  • justify-content:center;
  • justify-items:center;
  1. I am pretty sure that the align-content css property aligns the inner content (text) in an HTML element like a div, span, or h1. That's as far as I know, but I don't know how it differs from the justify-content css property.

  2. What I am pretty sure about is that if there are nested elements within an element, all of them should be aligned in the center. That is all I know, but I don't know how it is different than justify-items.

Please, if you know, tell me the difference (and if I was wrong), the descriptions of each one.
Thanks for reading.
Happy Coding.

Discussion (5)

pic
Editor guide
Collapse
chrisjcom profile image
Collapse
leviathanprogramming profile image
𝐋𝐄𝑽𝐈𝑨𝐓𝐇𝐀𝐍 Programming Author

Okay, I know the difference between items and content, but I'm wondering what the difference between align-content, justify-content, align-items, and justify-items. I want to know how aligning is different than justifying.

Collapse
chrisjcom profile image
Jhossymar Contreras • Edited

Anirudh talks about it in the post.

I will write my answer according to I know.

The difference between align and justify is that justify-* affects the main axis (horizontal when flex-direction is row and vertical when flex-direction is column) and align-* affects the cross axis (vertical when flex-direction is row and horizontal when flex-direction is column).

Regards.

Thread Thread
leviathanprogramming profile image
𝐋𝐄𝑽𝐈𝑨𝐓𝐇𝐀𝐍 Programming Author

Thanks a lot. That was really helpful.

Collapse
abhishekkumar201005 profile image
abhishekkumar201005

Both are different from each other because one's use flex property and other working on simple css property