Skip to content
Flex item
Overview
A flexible container item designed to be used within layout__flex.liquid for creating customizable layouts. Supports fit, fill, or custom responsive widths, alignment controls, spacing, optional sticky positioning, and optional load or scroll animations.
Block limitations
This is a private block. It is intended for use only within specific parent blocks and should not be added directly to sections.
Common use cases
- Use with layout__flex.liquid to create flexible grid-like layouts
- Choose Width Fill so a column grows, Fit for natural width, or Custom with mobile and desktop percentages
- Turn on Show advanced settings to adjust device visibility, sticky behavior, or entrance motion
- Adjust gap size to maintain consistent spacing between nested elements
Compatible blocks
The following blocks can be nested within this block:
- All theme blocks
- App blocks
Block settings
General
| Setting | Description | Options |
|---|---|---|
| Show advanced settings | Reveals device visibility, sticky layout, sticky position, and load or scroll animations | Checkbox (default: false) |
Spacing
| Setting | Description | Options |
|---|---|---|
| Enable padding | Adds padding around the flex item content | Checkbox (default: false) |
| Enable vertical spacing | Adds vertical padding (top and bottom) | Checkbox (default: true) |
| Gap size | Spacing between child blocks | • None |
Color
| Setting | Description | Options |
|---|---|---|
| Type | Custom scheme vs preset surface pair | • Custom Visible when Enable inheritance is off |
| Color scheme | Background and text | Color scheme picker Visible when type is Custom and Enable inheritance is off |
| Color scheme | Background and text | • Body background Visible when type is Base and Enable inheritance is off |
| Color border | Border color | • Subtle (default) Visible when Border position is not None, type is Base, and Enable inheritance is off |
| Enable inheritance | Inherit colors from a parent block | Checkbox (default: false) |
Style
| Setting | Description | Options |
|---|---|---|
| Border position | Controls where borders appear | • None (default) |
Layout
| Setting | Description | Options |
|---|---|---|
| Width | How the item sizes in the flex row | • Fit (content width) |
| Width mobile | Width on small screens | 5–100 %, step 5 (default: 80 %) |
| Width desktop | Width on large screens | 5–100 %, step 5 (default: 40 %) |
| Vertical alignment | Aligns nested content vertically in the item | • Top |
| Enable sticky layout | Enables sticky positioning for this item | Checkbox (default: false) |
| Sticky position | Edge the sticky item pins to | • None (default) Visible when Show advanced settings and Enable sticky layout are on |
Display
| Setting | Description | Options |
|---|---|---|
| Visibility | Device visibility | • All (default) Visible when Show advanced settings is on |
| Load animation | Animation when the block first loads | • None (default) Visible when Show advanced settings is on and Scroll animation is None |
| Scroll animation | Animation tied to scroll position | • None (default) Visible when Show advanced settings is on and Load animation is None |