Flexbox

Flexbox in Webflow gives you a powerful layout system for arranging elements in a row or column, with flexible sizing and alignment options. It's one of the most useful CSS layout tools, and Webflow's visual interface makes it accessible without writing code.

To enable Flexbox on a div or container, select the element and in the Style panel's Layout section, set the display to Flex. Once enabled, you'll see options for direction (row or column), alignment, justification, wrapping, and gap.

Direction controls whether children stack horizontally (row) or vertically (column). Justify content controls how children are distributed along the main axis — start, end, center, space between, or space around. Align items controls how children are positioned on the cross axis — useful for vertically centering items in a row or horizontally centering them in a column.

Each child element (a flex item) also has its own settings: you can control how much it grows to fill available space (flex grow), how much it shrinks when space is constrained (flex shrink), and its base size before growing or shrinking (flex basis).

Flexbox is best for one-dimensional layouts — arranging items in a single row or column. For two-dimensional layouts where you need both rows and columns, CSS Grid is typically the better choice. Webflow supports both.