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.

AttributeTypeDefaultDescription
responsiveSettingsobject(standard breakpoints)Flex direction, alignment, gap, and spacing per breakpoint

Control sets: MethodAlignmentControls (alignItems, justifyContent, flexDirection, flexWrap — No Wrap, Wrap, Wrap Reverse, Balance), 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: responsiveSettings — flexGrow, flexShrink, flexBasis per breakpoint; order and hide in the mobile, tablet and wide tiers
  • Control sets: MethodFlexControls (Flex Options: grow, shrink, basis; plus order in the responsive tabs), MethodAddtControls (hide, responsive tabs only), MethodResponsiveTabs, MethodStyleTag

An individual item within the flex layout. Its inspector carries the flex item properties — Flex Grow, Flex Shrink and Flex Basis at every breakpoint, and in the responsive tabs an Order field and a Hide toggle — which the render callback emits as flex-grow, flex-shrink, flex-basis, order and display: none; visibility: hidden on the item’s wrapper, scoped to its generated id. A new item starts with a placeholder paragraph.

Frontend Rendering

HTML 
<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.

Changelog

VersionDescription
2.0.0-beta5Introduced (cc3100d).
2.0.0-beta6Flex Item gains MethodFlexControls — grow, shrink and basis per breakpoint — and a render callback that emits them (127a874).
2.0.0-beta17Flex Item Hide toggle in the responsive tabs (60b9b07); Inserter title prefixed, “Method Flex Container” (c34e9bb).
2.0.0-beta20Flex Item Order in the mobile, tablet and wide tabs (ae61c10).
2.0.0-beta22A new Flex Item starts with a placeholder paragraph (“Flex item content goes here…”) (4f34c8b); Retitled “Flex Container (Method)” and given the method keyword (93e1fcf).
2.0.0-beta24Flex Wrap (flexWrap: nowrap, wrap, wrap-reverse, balance) in the container’s Alignment panel, emitted as flex-wrap on .method-flex-inner-blocks (a3a3034).
2.0.0-beta31Editor icon redrawn in the outlined style the Method icons now share; the block’s markup and attributes are unchanged (cd6f63f).