...
Flex Direction: controls the direction in which elements align within a flexible container. It determines whether the elements will be aligned in a row, in a column, or in other arrangements.
Row Direction/Row Reverse:
...
Column Direction/Column Reverse:
...
Justify Content: is used to horizontally align flexible elements within a flexible container. How justify-content affects the elements depends on the direction set by the flex-direction property.
Flex-start: (default)
...
Center:
...
Flex-end:
...
Space-between:
...
Space-around:
...
Space-Evenly:
...
Note: The difference between space-around and space-evenly lies in how margins at the ends of the container are handled. space-around places half of the space in the margins, while space-evenly distributes space everywhere, including the ends.
Align Items: controls how elements are vertically aligned within a flexible container. How align-items affects the elements depends on the direction set by the flex-direction property.
Top: (default)
...
Middle:
...
Although flexbox and grid share CSS style properties, grid is suitable for a wide variety of scenarios and layouts where the arrangement of elements in rows and columns is essential. Some them include: Image Grid, Blog and Articles, Data Tables, Forms, Control Panels, etc.