Flexbox Patterns

Flexbox is your go-to for one-dimensional layouts — rows of cards, centered content, navigation bars, and more. Webflow makes it easy to set up flex layouts visually.

What You'll Build

A section with at least one flexbox layout demonstrating common patterns. Pick one or more:

• Centering: Center content both horizontally and vertically
• Space Between: Evenly distribute items with space between them
• Card Row: A horizontal row of cards that wraps on smaller screens

Instructions

1. Set Up Your Section

Create a Section with proper naming (section_features, section_cards, etc.) and add a container inside.

2. Create a Flex Container

Add a Div Block inside your container. Give it a descriptive class like features_row or card-row. Set its display to Flex.

3. Configure Flex Properties

In the Style panel, set:

• Direction: Row (horizontal) or Column (vertical)
• Justify: Choose based on pattern:
  • Center — for centering
  • Space Between — for even distribution
  • Flex Start — for left alignment
• Align: Center (vertically centers items in a row)
• Wrap: Wrap (so items move to next line on small screens)
• Gap: Add spacing between items (16px–24px)

4. Add Child Elements

Add 2–4 child elements (cards, feature blocks, etc.) inside your flex container. Each should have a proper class name.

5. Responsive Check

At tablet/mobile breakpoints, consider:

• Changing direction from Row to Column
• Adjusting gaps
• Making items full-width

6. Publish and Submit

Publish and paste your URL below.

Tips

• Use gap instead of margins between flex items — it's cleaner
• flex-wrap: wrap is essential for responsive card rows
• For equal-width columns, set each child to flex: 1
• Centering trick: display: flex; justify-content: center; align-items: center centers everything