Flexbox container – Documentation

22Nov 2018 by andrei

Flexbox container – Documentation

The flexbox container is a powerful tool you can use in order to automatically arrange multiple fields horizontal or vertical. Flexbox containers can be used to create column or row layouts. You can drag any kind of field inside your flexbox, even flexboxes themselves, in order to create complex layouts for your website or form.

You can use the Flexbox in order to arrange content on your website
Demonstration of Flexbox auto-arrange feature

1. Flexbox

Use this group of settings in order to make settings regarding how your flexbox container will automatically arrange items you drag inside it:

1.1. Align items

Sets how the items inside the flexbox are aligned along the flexbox axis (vertical or horizontal):

Align items flexbox setting | AbcSubmit form builder
Flexbox align items setting explained

1.2. Direction

Sets the axis (direction) of the flexbox: Vertical: Arrange on Y axis, Horizontal: Arrange on X axis

Flexboxes can arrange items horizontal or vertical
Explanation of Flexbox “Direction” setting

1.3. Justify items

Sets the spacing and starting point of the items inside the flexbox:

Flexbox justify items available settings in AbcSubmit form builder
Flexbox Justify items setting explained

1.4. Item spacing

Sets a spacing between items of the flexbox. Node that this setting is compatible only when Justify items setting is Start, Center or End.

You can set the spacing between the items on your flexbox
Flexbox item spacing explained
Spread the love