W Webflow

How to build layouts with flexbox on Webflow

beginner 8 min read Updated 2026-03-18
Quick Answer

Building flexbox layouts in Webflow involves adding elements to a container, setting the display property to flex in the Style panel, and configuring flex properties like direction, alignment, and justify. Use the visual controls in Webflow's Style panel to adjust flex settings without writing code.

Try Webflow Full Webflow Review

Prerequisites

  • Basic understanding of Webflow Designer interface
  • Knowledge of HTML elements and structure
  • Understanding of responsive design principles
  • Familiarity with CSS layout concepts

Step-by-Step Instructions

1

Create a flex container

Select the element you want to convert to a flex container (like a Div Block or Section). In the Style panel on the right, go to the Layout section and click the Display dropdown. Select Flex from the options. Your element will now act as a flex container.
Start with a Div Block as it's the most versatile container for flexbox layouts
2

Add flex items

Drag elements from the Add panel into your flex container. These can be Div Blocks, Text Blocks, Images, or any other elements. Each direct child element automatically becomes a flex item. Add at least 2-3 elements to see flexbox behavior in action.
Use placeholder content initially to focus on layout structure before adding final content
3

Set flex direction

With your flex container selected, locate the Flex Children section in the Style panel. Click the Direction buttons to choose how flex items are arranged:
  • Row - items flow horizontally (default)
  • Column - items stack vertically
  • Row Reverse - horizontal flow in reverse order
  • Column Reverse - vertical stack in reverse order
Use Column direction for mobile layouts and Row for desktop to create responsive designs
4

Configure alignment properties

In the Flex Children section, adjust alignment using visual controls:
  • Justify - controls alignment along main axis (horizontal for row, vertical for column)
  • Align - controls alignment along cross axis (vertical for row, horizontal for column)
Click the grid icons to choose options like Start, Center, End, Space Between, or Space Around.
Use Center/Center alignment for perfectly centered content, or Space Between for evenly distributed items
5

Adjust individual flex items

Select individual flex items to control their behavior. In the Style panel, find the Flex Child section:
  • Flex Grow - enter a number to control how much the item should grow
  • Flex Shrink - controls how much the item should shrink
  • Flex Basis - set the initial size before growing/shrinking
  • Align Self - override the container's align setting for this item
Set Flex Grow to 1 on items you want to expand and fill available space
6

Handle flex wrap

Return to your flex container settings. In the Flex Children section, find the Wrap option:
  • No Wrap - items stay on one line (default)
  • Wrap - items move to new lines when needed
  • Wrap Reverse - items wrap to new lines in reverse order
When wrap is enabled, use Align Content to control how wrapped lines are distributed.
Enable wrap for card layouts or grids that need to respond to different screen sizes
7

Add responsive breakpoints

Click the device icons at the top of the Designer (Desktop, Tablet, Mobile Landscape, Mobile Portrait). Select each breakpoint and adjust your flexbox settings accordingly. You might change from flex-direction: row on desktop to flex-direction: column on mobile for better mobile experience.
Always design mobile-first by starting with the Mobile Portrait breakpoint and working up to Desktop
8

Preview and refine

Click the Preview button (eye icon) in the top toolbar to see your flexbox layout in action. Test different screen sizes by resizing your browser window. Return to the Designer to make adjustments to gap, padding, or margin in the Spacing section of the Style panel.
Use the Gap property in the Flex Children section for consistent spacing between flex items

Common Issues & Troubleshooting

Flex items are not aligning as expected

Check that you've selected the correct flex container (parent element) when setting Justify and Align properties. Remember that Justify controls the main axis and Align controls the cross axis.

Items are overflowing the container

Enable Wrap in the Flex Children section, or reduce the Flex Basis values on individual flex items. Also check if any items have fixed widths that are too large.

Flex items have unwanted gaps or spacing

Adjust the Gap property in the Flex Children section instead of using margins. If gaps persist, check for default margins on child elements and reset them to 0.

Layout breaks on mobile devices

Switch to Mobile Portrait breakpoint and change flex-direction to Column. Also ensure flex items have appropriate min-width or max-width values set in the Size section.

Prices mentioned in this guide are pulled from current plan data and may change. Always verify on the official Webflow website before purchasing.
Visit Webflow View Webflow Pricing