The Flexbox Layout is a one-dimensional flexible box layout that works on either rows or columns at a time. The CSS property flex-direction define the main axis and direction of the display.
The grid layout can be converted into a flexible container by activating the option within the grid layout options and configuring the number of elements (with pink border) that will be displayed.
Once converted to a flexible container the properties within the grid layout control the direction and flow of elements.
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.
Flex Row/Row Reverse
Flex Column/Column Reverse:
Justify Content: is used to horizontally align flexible elements within a flexible container.
Flex-start: (default)
Center:
Flex-end:
Space-between:
Space-around:
Space-Evenly:
In addition to turning the grid layout into a flex container, we can add inside the grid areas (with pink border) a widget called "Inner Flex Box".
Unlike the inner section, the inner flexbox can be added without a limit.
