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.