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 • Default (default) • XS • SM • MD • LG • XL

Color

Setting	Description	Options
Type	Custom scheme vs preset surface pair	• Custom • Base (default) 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 • Body foreground • Accent 1–3 • Shade 1–3 • Blur • Transparent (default) Visible when type is Base and Enable inheritance is off
Color border	Border color	• Subtle (default) • Strong • None 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) • Top • Bottom • Left • Right • Top and bottom • Left and right • All

Layout

Setting	Description	Options
Width	How the item sizes in the flex row	• Fit (content width) • Fill (grow to use free space) • Custom (default) — use mobile and desktop sliders
Width mobile	Width on small screens	5–100 %, step 5 (default: 80 %) Visible when Width is Custom
Width desktop	Width on large screens	5–100 %, step 5 (default: 40 %) Visible when Width is Custom
Vertical alignment	Aligns nested content vertically in the item	• Top • Middle • Bottom (default)
Enable sticky layout	Enables sticky positioning for this item	Checkbox (default: false) Visible when Show advanced settings is on
Sticky position	Edge the sticky item pins to	• None (default) • Top • Bottom Visible when Show advanced settings and Enable sticky layout are on

Display

Setting	Description	Options
Visibility	Device visibility	• All (default) • Mobile only • Desktop only Visible when Show advanced settings is on
Load animation	Animation when the block first loads	• None (default) • Fade • Fade up • Offset fade • Offset fade up Visible when Show advanced settings is on and Scroll animation is None
Scroll animation	Animation tied to scroll position	• None (default) • Fade • Fade up • Fade down • Slide left • Slide right • Zoom Visible when Show advanced settings is on and Load animation is None