Welcome to the new Flexbox preview page

To see how the Flexbox elements are built you must open it in the editor and Expert mode should be enabled!

Flexbox is a super powerful way to lay out elements on a page.  Note that Flexbox in FROONT is still in beta. To extend the functionality edit element's CSS. Have ideas for improvement? Send us an email!

This is a simple layout where the main container has a property Flexbox (Panel / Layout / Flexbox). The image container has a background and the text container has a Flexbox property too.

The following block has the property Reverse Order set to Reversed (Panel / Layot / Reverse order)

Here the alignation of the text widget is changed. Feel free to experiment with that! Go to Layout / Flexbox / Vertical and Horizontal align to do so.

Make sure to check out how each block is acting in the smaller breakpoints! More exampes and documentation is coming soon!