Today I want to give you a basic introduction to using Flex in GenerateBlocks. When Flex was first introduced, it took me a while to adapt since it wasn’t the standard method for building in WordPress. But over time, I’ve learned more about it, and now I use it regularly in my projects.
When to Use Flex
Flex is extremely useful when building out query loops, particularly for blog posts or custom post types. It’s also great for card designs and situations where you need to control the layout of your design elements, like keeping text at the top and buttons at the bottom without relying on margin and padding adjustments.
I know I’m still underutilizing Flex, but as I learn more, I’m finding new ways to take advantage of it. Let’s jump into a simple example of how to use Flex in GenerateBlocks.
Step 1: Set Up Your Containers
Start by adding a container block. Whether you need an inner container depends on whether you want your content to span the full width of the page or be contained within a specific width. For this example, I’m adding an inner container.
Step 2: Create a Three-Column Layout
Inside the inner container, add three more containers. These will be your columns. By default, they stack on top of each other, but we want them side by side. To do this, select the inner container and change the display setting to Flex.
Now the columns are side by side, but we need to adjust their width. You can either:
- Set the Flex child grow property to 1 for each container, or
- Set the width of each container to 33% in the sizing panel.
After that, add some column gap to create space between the columns.
Step 3: Make the Layout Responsive
For mobile, you’ll want the columns to stack vertically. To do this, change the Flex direction from row to column. Then, set each container’s width to 100% to ensure they span the full width on mobile. Don’t forget to add some row gap to create space between the stacked columns.
Step 4: Align Content Using Flex
Inside each container, you can use Flex settings to control the alignment of content. For example, you can justify content to the center or bottom of a container. This is particularly useful when you want a consistent layout across different devices.
Step 5: Control the Order of Content on Mobile
If you need to change the order of elements on mobile, you can use the Flex child order property. For example, if you want a headline to appear below the content on mobile, you can set the order property to achieve that.
Step 6: Nest Containers for More Control
You can also nest containers within containers to create more complex layouts. For instance, if you want to add an icon next to a name, you can insert two containers inside another container, use Flex to align them, and control their positioning.
Conclusion
Flex in GenerateBlocks offers endless possibilities for creating flexible and responsive layouts. While I’m still exploring all the ways to use it, I hope this introduction gives you a good starting point. In the future, I’ll dive deeper into more complex designs using Flex, so stay tuned for more tutorials.
