Question

How wrapping and the height of the flex container and flex items affect the behavior of align-content?

(Assuming the default flex-direction: row)

#flexbox #css

Answer

The align-content property controls how the flex items are aligned in a *multi-line* flex container, so it only applies when flex-wrap is wrap or wrap-reverse.

It only works as expected when the container has a fixed height. The flex items may or may not have a specified height.

align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch

[^1]: https://medium.freecodecamp.com/understanding-flexbox-everything-you-need-to-know-b4013d4dc9af#9c3c
[^2]: https://developer.mozilla.org/en/docs/Web/CSS/align-content

Learn

Author

xavi

Reviews
Last
next

Students 1