FlexContainer/V1

Modern flexbox layout for flexible element arrangement. Can be used inside SectionContainer or ColContainer.

Important Constraints

FlexContainer is always centered: It has margin: 0 auto applied. You cannot change horizontal alignment - only margin-top is available.

Default padding:

padding-top: 20px
padding-bottom: 20px
--style-padding-horizontal: 15px
gap: 1.5em

Basic Structure

JSON

{
  "type": "FlexContainer/V1",
  "id": "6Z-xxxxx-0",
  "version": 0,
  "parentId": "column-id",
  "fractionalIndex": "a0",
  "attrs": {
    "className": "elFlexWrap elFlexNoWrapMobile",
    "style": {
      "width": 100,
      "flex-direction": "row",
      "justify-content": "center",
      "align-items": "center",
      "gap": 1.5
    },
    "data-skip-background-settings": "false",
    "data-skip-shadow-settings": "false",
    "data-skip-corners-settings": "false"
  },
  "params": {
    "width--unit": "%",
    "gap--unit": "em"
  },
  "children": []
}

Flexbox Properties

flex-direction

Value	Description
`row`	Horizontal layout (default)
`column`	Vertical layout
`row-reverse`	Horizontal, reversed
`column-reverse`	Vertical, reversed

justify-content

Value	Description
`flex-start`	Items at start
`center`	Items centered
`flex-end`	Items at end
`space-between`	Evenly distributed, edges flush
`space-around`	Evenly distributed, equal spacing

align-items

Value	Description
`flex-start`	Align to top
`center`	Center vertically
`flex-end`	Align to bottom
`stretch`	Stretch to fill

Wrap Classes

Control wrapping behavior on desktop and mobile:

Class	Description
`elFlexNoWrap`	No wrap on desktop
`elFlexWrap`	Wrap on desktop
`elFlexNoWrapMobile`	No wrap on mobile
`elFlexWrapMobile`	Wrap on mobile

Common pattern: Use elFlexWrap elFlexNoWrapMobile for items that wrap on desktop but stay in a row on mobile.

Full Example

FlexContainer with two buttons side by side:

JSON

{
  "type": "FlexContainer/V1",
  "id": "6Z-FlExC-0",
  "version": 0,
  "parentId": "6Z-CoLaB-0",
  "fractionalIndex": "a0",
  "attrs": {
    "className": "elFlexWrap elFlexWrapMobile",
    "style": {
      "width": 100,
      "flex-direction": "row",
      "justify-content": "center",
      "align-items": "center",
      "gap": 1.5,
      "padding-top": 20,
      "padding-bottom": 20,
      "margin-top": 0,
      "border-radius": 8
    },
    "data-skip-background-settings": "false",
    "data-skip-shadow-settings": "false",
    "data-skip-corners-settings": "false"
  },
  "params": {
    "width--unit": "%",
    "gap--unit": "em",
    "padding-top--unit": "px",
    "padding-bottom--unit": "px",
    "margin-top--unit": "px",
    "--style-padding-horizontal": 15,
    "--style-padding-horizontal--unit": "px",
    "--style-background-color": "#f8fafc",
    "border-radius--unit": "px"
  },
  "children": [
    {
      "type": "Button/V1",
      "id": "6Z-BtN01-0",
      "parentId": "6Z-FlExC-0",
      "fractionalIndex": "a0"
    },
    {
      "type": "Button/V1",
      "id": "6Z-BtN02-0",
      "parentId": "6Z-FlExC-0",
      "fractionalIndex": "a1"
    }
  ]
}

data-skip-* Attributes

Set these to "false" when FlexContainer has that styling to enable CF editor panels:

Attribute	Purpose
`data-skip-background-settings`	Enable background color/image panel
`data-skip-shadow-settings`	Enable shadow settings panel
`data-skip-corners-settings`	Enable corner radius panel