Flex
How to use the Flex block in the Meditative Folks Theme.
Flex
At a glance
Lays out child blocks in a horizontal or vertical row with alignment controls.
Used in
- Header (via theme blocks)
- Custom section
- Home
Settings
Layout settings
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Wrap | Controls “Wrap” on the storefront. Open the theme editor to preview live. | wrap | Always |
| Gap | Controls “Gap” on the storefront. Open the theme editor to preview live. | 12 | Always |
Mobile layout
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Direction | Controls “Direction” on the storefront. Open the theme editor to preview live. | row | Always |
| Justify content | Controls “Justify content” on the storefront. Open the theme editor to preview live. | space-between | Always |
| Align items | Controls “Align items” on the storefront. Open the theme editor to preview live. | center | Always |
| Fill available height | Use with Direction: Column when the parent offers extra height (for example a stretched grid cell). Helps Justify content: Space between pin blocks to the top and bottom. | No | Always |
Tablet layout
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Direction | Controls “Direction” on the storefront. Open the theme editor to preview live. | row | Always |
| Justify content | Controls “Justify content” on the storefront. Open the theme editor to preview live. | space-between | Always |
| Align items | Controls “Align items” on the storefront. Open the theme editor to preview live. | center | Always |
| Fill available height | Use with Direction: Column when the parent offers extra height (for example a stretched grid cell). Helps Justify content: Space between pin blocks to the top and bottom. | No | Always |
Desktop layout
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Direction | Controls “Direction” on the storefront. Open the theme editor to preview live. | row | Always |
| Justify content | Controls “Justify content” on the storefront. Open the theme editor to preview live. | space-between | Always |
| Align items | Controls “Align items” on the storefront. Open the theme editor to preview live. | center | Always |
| Fill available height | Use with Direction: Column when the parent offers extra height (for example a stretched grid cell). Helps Justify content: Space between pin blocks to the top and bottom. | No | Always |
Padding
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Padding top | Adds empty space (padding top) around the section content. | 0 | Always |
| Padding bottom | Adds empty space (padding bottom) around the section content. | 0 | Always |
| Padding left | Adds empty space (padding left) around the section content. | 0 | Always |
| Padding right | Adds empty space (padding right) around the section content. | 0 | Always |
Setting details
Each control from the tables above, explained simply:
Wrap
Controls “Wrap” on the storefront. Open the theme editor to preview live. Default: wrap.
Gap
Controls “Gap” on the storefront. Open the theme editor to preview live. Default: 12.
Direction
Controls “Direction” on the storefront. Open the theme editor to preview live. Default: row.
Justify content
Controls “Justify content” on the storefront. Open the theme editor to preview live. Default: space-between.
Align items
Controls “Align items” on the storefront. Open the theme editor to preview live. Default: center.
Fill available height
Use with Direction: Column when the parent offers extra height (for example a stretched grid cell). Helps Justify content: Space between pin blocks to the top and bottom. Default: No.
Direction
Controls “Direction” on the storefront. Open the theme editor to preview live. Default: row.
Justify content
Controls “Justify content” on the storefront. Open the theme editor to preview live. Default: space-between.
Align items
Controls “Align items” on the storefront. Open the theme editor to preview live. Default: center.
Fill available height
Use with Direction: Column when the parent offers extra height (for example a stretched grid cell). Helps Justify content: Space between pin blocks to the top and bottom. Default: No.
Direction
Controls “Direction” on the storefront. Open the theme editor to preview live. Default: row.
Justify content
Controls “Justify content” on the storefront. Open the theme editor to preview live. Default: space-between.
Align items
Controls “Align items” on the storefront. Open the theme editor to preview live. Default: center.
Fill available height
Use with Direction: Column when the parent offers extra height (for example a stretched grid cell). Helps Justify content: Space between pin blocks to the top and bottom. Default: No.
Padding top
Adds empty space (padding top) around the section content. Default: 0.
Padding bottom
Adds empty space (padding bottom) around the section content. Default: 0.
Padding left
Adds empty space (padding left) around the section content. Default: 0.
Padding right
Adds empty space (padding right) around the section content. Default: 0.
Tips
- Place this block inside a wrapper if it should only show on certain screen sizes.
- Preview in the theme editor on mobile and desktop.