Note: The align-content property dictates how a browser places flex items that span over multiple lines. This property only works if two conditions are true: First, the flex container must have wrap turned on -- second, the flex container must be taller than the rows of flex items. In other words, there must be additional vertical space inside the container that’s greater than the combined heights of the rows of items. For more info visit MDN.

Note: Note that depending on how much content is in each item, rows may be of different heights. In this example, the rows are set to 35% of the container div.

Note: Flex containers are not block-level elements, so some properties don’t apply to flex containers or items. For example, the column property doesn’t apply to flex containers, and the float and clear properties don’t apply to ​flex items.​