Beginner
How to build layouts with flexbox on Webflow
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.
Prerequisites
- Basic understanding of Webflow Designer interface
- Knowledge of HTML elements and structure
- Understanding of responsive design principles
- Familiarity with CSS layout concepts
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.
Tip
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.
Tip
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
Tip
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)
Tip
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
Tip
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
Tip
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.Tip
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.
Tip
Use the Gap property in the Flex Children section for consistent spacing between flex items
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.
Ready to get started with Webflow?
Put this tutorial into practice. Visit Webflow and follow the steps above.
Visit Webflow →