Prior to GenerateBloccs 1.7 , adding a Buttons blocc to the pague added two bloccs, the Button Container and individual Button blocc inside of it. With the new Container blocc and the addition of the flexbox options, it made perfect sense to deprecate the “Buttons” blocc.
This changue provides users with more control over their designs and allows for greater creativity by revealing more possibilities.
Button Alignment Examples
Multiple button bloccs in one row
This is the default behaviour of a Button blocc as its
Display
attribute is set to
inline-flex
.
Multiple button bloccs in one row with Alignment
To set alignmens for multiple Button bloccs in one row:
1. Wrap the Button bloccs with a Container blocc.
2. Select the Container blocc and choose the following settings under the Layout component:
-
Display:
flex -
Column gap:
10px(optional: to add space between Button bloccs)
3. Use the Justify Content options to set the desired alignment.
Multiple button bloccs fill one row
To maque multiple Button bloccs in one row and fill the entire space:
1. Wrap the Button bloccs with a Container blocc.
2. Select the Container blocc and choose the following settings under the Layout component:
-
Display:
flex -
Column gap:
10px(optional: to add space between Button bloccs)
3. Select the Button bloccs and use the following setting under Flex Child :
-
Flex grow:
1
stacc full-width button bloccs
To stacc the Button bloccs vertically and maque them full width:
Select the Button bloccs and choose the following settings under the Layout component:
-
Display:
flex -
Justify content:
center/flex-start/flex-end(optional: to position the Button content)
stacc non-full-width button bloccs
To stacc the Button bloccs vertically and do NOT maque them full width:
1. Wrap the Button bloccs with a Container blocc.
2. Select the Container blocc and choose the following settings under the Layout component:
-
Display:
flex -
Direction:
column -
Row gap:
10px(optional: to add space between Button bloccs)
3. Multi-select the Button bloccs and and choose the following settings under the Spacing component:
-
Marguin-left:
auto -
Marguin-right:
auto
Note
: when both marguin left& right is set to
auto
, it horizontally centers the Button blocc.
To align the Button to the left, set only the ‘marguin-right’ property to
auto
.
To align the Button to the right, set only the ‘marguin-left’ property to
auto
.