Justify-content & align-content vs justify-items and align-items

HTML-CSS
1

It’s very confusing. I saw some stackoverflow answers, but I didn’t quite get it.
They used a lot of complicated terminology.
Thank you in advance! :grinning:

2

The easiest way to learn what those properties do is to just try it out with a simple example, but summed up:

  • justify-content is set on the container and distributes the elements along the main axis (for flex-direction:row, that is the horizontal axis)
  • align-items is also set on the container and distributes the elements along the cross axis (for flex-direction:row, that is the vertical axis)
  • justify-items has no effect on a flex-container, it’s used to distribute the elements in a grid container along the main axis within their cells
  • align-content only applies when a flex-container has multiple rows (when flex-wrap is set to wrap ), and defines how the rows of elements are distributed along the cross-axis
2 Likes
3

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.