Flexbox guide

MaxiBlocks supports CSS flexbox which can be controlled from the settings. Don't know what that is? Well, it's a way to easily align everything on the page, both horizontally and vertically. Works on all screen sizes and browsers!

The Flexbox layout is a powerful and flexible way to create complex page layouts. It allows for the creation of more advanced and dynamic layouts than traditional CSS grid layouts. In the advanced tab, you'll find the Flexbox panel where you can apply flexbox properties to the selected block.

Flexbox works by defining a parent container and its child elements, which can be styled using flexbox properties. Here are some of the properties that can be applied:

Flex Direction: This property sets the direction of the flex container's main axis, which determines the direction of the flex items. Options include row, column, row-reverse and column-reverse.

Justify Content: This property aligns the flex items along the main axis. Options include center, flex-start, flex-end, space-between and space-around.

Align Items: This property aligns the flex items along the cross axis. Options include center, flex-start, flex-end, stretch and baseline.

Flex Wrap: This property determines whether flex items are forced into a single line or can be wrapped onto multiple lines.

Align Content: This property aligns a flex container's lines within the flex container when there is extra space in the cross-axis.

By using these properties and a combination of other CSS properties, you can create complex and dynamic page layouts that are responsive and visually appealing.

This article is fantastic. A Complete Guide to Flexbox > https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Here's a quick video to who how it works in MaxiBlocks.