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?

𝐋𝐄𝑽𝐈𝑨𝐓𝐇𝐀𝐍 Programming
I am a fifteen-year-old christian Homeschooler that is crazy about coding. I've been coding for about four years now. I also use HTML, CSS, JS, Flask (Python), PHP, SQL, React, P5js, and more!
・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)

Collapse
chrisjcom profile image
Jhossymar Contreras
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