Webflow Flexbox UI Builder

Webflow provides a visual flexbox builder that allows you to create flexible, responsive layouts without writing code. You can set parent and child elements to define alignment, wrapping, and sizing behaviors.

Yes, Webflow offers a free plan to get started. You can explore its features and build layouts without any cost.

You can build various layouts such as split-screens, sidebars, sticky footers, hero covers, holy grails, fluid grids, and more. Webflow provides step-by-step guides for each layout type.

To create a split-screen layout, make a flex container by adding a div block or section and setting it to Display: Flex. Then add two div blocks inside the container and set their Sizing to Expand to make them evenly fill the parent's width.

Create a flex container with horizontal layout. Add two div blocks inside the container, set the sidebar element to Width: 30%, and the main content element to Sizing: Expand. Apply Overflow: Scroll to the main content element to make it scrollable.

Create a vertical flex container and apply Direction: Column. Add a header, main content element, and footer inside the container. Apply Sizing: Expand to the main content element to push the footer to the bottom of the page.

Make a flex container and set it to Wrap Children. Nest elements inside the container and give them variable width values, such as 33.33% for a multi-line grid of three elements in a row.

Create a vertical flex container and apply Direction: Column. Add a header, middle section, and footer inside the container. Apply Sizing: Expand to the middle section. Nest another horizontal flex container inside the middle section with three children, applying Width: 20% to the sidebar elements and Sizing: Expand to the main content area.