What is Flexbox and How to Use It

What is Flexbox?

Flexbox is a layout method that allows you to arrange your inner blocks in a horizontal or vertical axis. Flexbox controls provide instant settings to align and justify your content. Inner blocks expand - or flex - to fill additional space or contract into a smaller space.

Flexbox can be used to create flexible and responsive web layouts that adapt across different types of devices.

Inner Block Direction

You can use Inner Block Direction to position your inner blocks horizontally or vertically inside a column.

Column and Inner Block Justify

Column and Inner Block Justify settings give you control over the position and spacing of columns or elements inside a column.

You can choose from Start, Center, End, Space Between, Space Around or Space Evenly for a Column and Inner Blocks in a Horizontal direction.

When Inner Blocks are in the Vertical direction, you have the justify controls Left, Center and Right.

Column and Inner Block Alignment

Column and Inner Block Alignment settings give you control over the alignment of a column, or elements inside a column.

Columns can be aligned at the Start, Center, End, Stretch, or Baseline.

At Baseline, the baseline of each text aligns together.

Inner Blocks can be aligned at the Top, Center or Bottom when it’s in the Horizontal direction.

When Inner Blocks are in the Vertical direction, you have more alignment controls such as Start, Center, End, Space Between, Space Around or Space Evenly.

Inner Block Wrapping

When Horizontal direction is selected for your inner blocks, an Inner Block Wrapping option will appear in the settings where you can choose No Wrap to force elements into a single line or Wrap to let the elements flow into multiple lines.

Use the Inner Block Gap settings to add space between your blocks.

Align Last Block to Bottom

Lastly, there is a toggle switch to Align Last Block to Bottom to align the last inner block to the bottom of the parent block.