Flexbox

Flexbox is a CSS layout mechanism that offers precise alignment and stacking control for the content inside an element. Webflow’s visual flexbox builder allows you to create flexible, responsive layouts without writing code.

Ways to use flexbox include:

• Designing a split-screen layout
• Adding a sticky sidebar alongside scrolling content
• Creating a fullscreen hero cover page
• Building the most common layouts for feature lists
• Keeping card designs vertically aligned in equal-height elements
• Making a fully responsive layout with a header, footer, and a three-column body

Flexbox turns any element containing other elements into a flex container, which acts as the flex parent. The direct children of that element then become its flex children. Changing an element to flex makes it easier to modify the layout of the flex parent and flex children, such as their direction, alignment, and gap sizes between columns and rows.

Flexbox is a powerful tool that solves many layout problems. Explore our flexbox lessons in Webflow University to learn more about its many features and capabilities.