Using the Flex Container Block

Want to build custom column layouts and flexible sections on your WordPress site? The Flex Container block in aThemes Blocks lets you group multiple blocks in a single row, pick between flex and grid layouts, and fine-tune dimensions, spacing, and responsiveness across devices.

In this guide, we’ll walk you through how to enable, configure, and nest the Flex Container block with aThemes Blocks.

Before you get started, make sure you’ve installed and activated the aThemes Blocks plugin on your WordPress site.

Enabling the Flex Container Block

First, enable the Container block from the Blocks Dashboard.

Enabling the Flex Container block from the aThemes Blocks dashboard

Once enabled, add the Container block to your page from the block inserter.

Adding the Container block to a page in the WordPress editor

After adding it, you can create custom column layouts and control the container’s width, height, and content dimensions. You can also insert other blocks within each column to combine different design elements seamlessly.

Container block with custom column layout

Configuring General Settings

With the Container block selected, open the General tab in the settings sidebar:

  • Type – Set the container width to Full Width, Boxed, or Custom. You can also define the content width and minimum height.
  • Layout – Choose between Flex or Grid layouts. Configure direction, column gap, row gap, child width, align items, justify content, and wrap.

Flex Container block general settings

Styling the Flex Container Block

Switch to the Style tab to customize the container’s visual appearance:

  • Background – Choose a solid color, gradient, or image background.
  • Color – Set text and link colors.
  • Border – Define the border style (solid, dashed, dotted, double, groove, and more).

Flex Container block style settings

Configuring Advanced Settings

  • Layout – Adjust padding, margin, and Z-index.
  • Animation – Apply entrance animations like slide in, fade in, zoom in, rotate in, or flip in.
  • Responsive – Hide the block on desktop, tablet, or mobile.
  • Advanced – Add custom CSS classes or CSS IDs for further styling.

Flex Container block advanced settings

Working with Container Blocks

You can nest other blocks, either new or existing, inside a Container block, including other containers for more advanced layouts. Each Container block can have its own style settings for fully customized sections.

Nested Container blocks

Adding New Blocks Inside a Container

To insert a new block inside a Container block, click the + icon within the container area.

Dragging Existing Blocks into a Container

You can drag and drop any existing block into a Container block. Once inside, blocks can be reordered by dragging them as needed.

Reusing a Container Block Across Designs

WordPress lets you save and reuse blocks across multiple pages. Mark a Container block as reusable when it contains several blocks and specific styles. This saves time and ensures design consistency across your site.

Marking a Container block as reusable

Frequently Asked Questions

Below, we’ve answered some of the most common questions about the Flex Container block.

Can I nest one Container block inside another?

Yes. Container blocks can be nested to build more advanced, multi-level layouts, and each container keeps its own style settings.

When should I use Flex vs. Grid layout?

Use Flex for one-dimensional rows or columns where items flow in a single direction. Use Grid when you need two-dimensional control over rows and columns at the same time.

How do I reuse the same container on multiple pages?

Select the Container block, open the block options menu, and save it as a reusable block. You can then insert it on any page or post.

That’s it! You’ve successfully built a custom layout using the aThemes Blocks Flex Container block.

Next, would you like to fill your new containers with styled text? Check out our guide on Using the Text Block to learn more.