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.
Converting the The grid layout can be converted into a flexible container can be done 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.
...