What is the difference between justify-content and align-items?

Language Help General Programming
1

I want to center certain things but I always end up trying out millions of things, maybe getting the difference of these two will help me?
Thanks in advance!

2

justify-content distributes items on the main axis. The main axis is by default the horizontal axis. As in, justifying text is what you do in Microsoft Word when you set it to left align, center, right align, etc. The main axis can be changed with flex-direction, but again, the default is horizontal.

align-content distributes items on the other axis. The other axis is by default the vertical axis. This other axis is changed alongside the main axis when flex-direction is defined.

justify-items and align-items are honestly a bit harder to understand. They set the justify-self and align-self properties on all items within their container. Sometimes, they’re ignored, though, so keep that in mind.

For even more information, check the Mozilla (MDN) Web Docs for each property.

As a post-edit addendum: to center things, there’s a multitude ways of doing it, but, generally speaking, using modern CSS there’s two primary ways.

Using flexbox:

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

Using grid:

.container {
  display: grid;
  place-items: center;
}

Here’s all the major ways of centering an element: How to Center a Div with CSS – 10 Different Ways

1 Like