html5 – About CSS flexbox: equal values ​​for different CSS properties


I'm studying the language documentation, and the following question occurred to me:

Both the align-content property and the align-items property accept the values:

  • flex-start
  • flex-end
  • stretch

And looking at the examples, I couldn't see any difference.

So what would be the difference between the two properties?

How do you know, for example, when to write flex-start in align-content or align-items ?


Both are intended to manipulate the content of a display: flex; element display: flex; , this we'll call the parent element.

align-items is more common, as it is independent of how many lines the parent element's children have.

Unlike align-content which only has an effect when the children of the parent element occupy more than one line.

Here's an excellent flexbox guide that better explains what was said above.

Scroll to Top