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 size of 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:
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.
