...
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:
...
Bottom:
...
Baseline:
...
Stretch:
...
Note: baseline aligns elements based on their text baseline, which can result in variable heights, while stretch stretches elements to have the same height on the cross-axis regardless of their content.
Flex Wrap: controls whether flexible elements inside a flexible container can or cannot wrap onto multiple lines when there is not enough space.
None:
...
Wrap: (default)
...
Reverse:
...
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.