These days I’m utilizing flex on just about any given page I’m building on, and with the recent update of GenerateBlocks 2.0 I just wanted to walk you through how to set up a basic flex section.
Step 1: Create a 50/50 Flex Layout
Start by inserting a container and an inner container. Inside the inner container, insert a new container, then duplicate it using Command + Shift + D. Rename the elements for clarity: one as the inner container, one as the left column, and one as the right column.
Select the inner container, go to the Layout tab in the right-hand Styles panel, and choose Display: Flex.
Now select the left and right column containers together. Under Layout, adjust the Flex Grow, Shrink, and Basis settings: Grow = 1, Shrink = 0, Basis = 1. This gives you a 50/50 layout.
Add background colors temporarily to visualize the layout. Use column gap (e.g., 2rem) in the inner container to create space between the columns.
Step 2: Add Content to Your Layout
In the left column, add a heading, text, and a button. In the right column, add an image block. Clear out any background colors after verifying layout structure.
Step 3: Vertically Align the Left Column
If your image is taller than your content, align the text vertically. Select the left column container, set display to flex, change the direction to column, align items to the left, and justify content to center.
Step 4: Make It Responsive for Mobile
Select the inner container and go to the Mobile view. Change Flex Direction to Column. Because the Flex Grow settings are already applied, the left and right columns will stack and stretch to full width.
Add row gap (e.g., 2rem) under the Mobile view settings in the inner container to ensure spacing between stacked elements.
Check the Tablet view. If it looks good, no changes are needed.
Step 5: Preview the 50/50 Flex Layout
Save the draft and preview the layout. You should now have a clean, basic 50/50 flex layout.
Step 6: Adjust Column Widths with Flex Grow
To create a 1/3–2/3 layout:
- Set the left column Flex Grow to 1
- Set the right column Flex Grow to 2
To reverse that (2/3–1/3):
- Left column Flex Grow = 2
- Right column Flex Grow = 1
To make it 3/4–1/4:
- Left column Flex Grow = 3
- Right column Flex Grow = 1
Preview the page after each change to confirm layout adjustments.
Mastering Flex Layouts in GenerateBlocks
Once you understand how Flex Grow, Shrink, and Basis work together, it’s easy to build just about any layout.
