Flex Box

Owned by Diana Castillo Arroyo
Last updated: Oct 06, 2023
3 min read

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.