concept flex direction in category css

This is an excerpt from Manning's book CSS in Depth. Login to get full access to this book.

Figure 5.14. Changing the flex direction changes the main axis. The cross axis changes as well, to remain perpendicular to the main axis.

If the flex direction is column or column-reverse, then flex-wrap will allow the flex items to overflow into a new column. However, this only happens if something constrains the height of the container; otherwise, it grows to contain its flex items.

The inner flexbox here has a flex direction of column, so the main axis is rotated. It flows from top to bottom (and the cross axis now flows from left to right). This means that for those flex items, flex-basis, flex-grow, and flex-shrink now apply to the element height rather than the width. By specifying flex: 1, the height of these items will stretch if necessary to fill the container. Now, regardless of which side is taller, the bottom of the large tile and the bottom of the second smaller tile align.