Flex Container

Overview

A layout container for arranging child items using flexbox, with controls for direction, alignment, and justification across breakpoints.

Usage

The Flex Container provides a CSS Flexbox layout that can arrange children horizontally or vertically with full control over direction, alignment, justification, and gap at every breakpoint. It is useful for inline layouts, navigation‑style arrangements, or any row/column of items that need flexible spacing.

1. Insert a Flex Container block.
2. Add Flex Item blocks (or Theme Button blocks) inside it.
3. Configure flex direction, alignment, justification, and gap in the inspector.
4. Place any content inside each Flex Item.

Child Blocks

Flex Container (method/flex)

• Block name: method/flex
• Category: method-layout-blocks
• Render type: Dynamic (PHP render_callback)
• Inner blocks: Yes — method/flex-item and method/theme-button

The flex wrapper.

Control sets: MethodAlignmentControls (alignItems, justifyContent, flexDirection), MethodSpacingControls (padding all sides, margin all sides, gap horizontal/vertical), MethodResponsiveTabs, MethodStyleTag, useResponsiveSetter

Flex Item (method/flex-item)

• Parent: method/flex
• Inner blocks: Accepts any blocks
• Attributes: None
• Control sets: None

An individual item within the flex layout. No inspector controls — simply a wrapper for inner content.

Frontend Rendering

<div class="method-flex" id="method-{id}">
  <div class="method-flex-inner-blocks">
    <div class="method-flex-item" id="method-{id}">
      <div class="method-flex-item-inner-blocks">
        {inner content}
      </div>
    </div>
  </div>
</div>

<div class="method-flex" id="method-{id}">
  <div class="method-flex-inner-blocks">
    <div class="method-flex-item" id="method-{id}">
      <div class="method-flex-item-inner-blocks">
        {inner content}
      </div>
    </div>
  </div>
</div>

Filters

This block does not currently expose dedicated PHP filters.