1. Flex parent settings
Just set a parent element to display: flex, then define alignment, wrap child elements into rows, or reverse the layout.
Easily build flexible, responsive layouts—without writing code. Only in Webflow.
It’s a powerful layout mechanism that lets you solve common responsive web design problems with ease. And with Webflow, you can do it all in 2 simple interfaces.
Just set a parent element to display: flex, then define alignment, wrap child elements into rows, or reverse the layout.
Then give the child elements their own resizing behavior, alignment options, and even device-specific display order.
Flexbox can help you solve some seriously tough layout problems—like those below—in seconds.
Easily build creative layouts that let your content shine.
Easily achieve popular but difficult design patterns.
Create a split-screen layout in seconds — without using any grid systems.
Make a flexbox container by adding a div block or section and setting it to Display: Flex.
By default, the layout direction will be horizontal and children will stretch vertically—perfect for this layout.
Add 2 div blocks to the flexbox container and give them the same class.
Set Sizing: Expand on both divs to make them evenly fill their parent's widths.
Term-sheet responsive web design accelerator ramen low hanging fruit prototype buzz startup direct mailing rockstar venture. Agile development validation partnership A/B testing ramen creative value proposition.
Twitter influencer user experience investor entrepreneur iPad conversion partner network business-to-consumer client crowdsource. Focus gamification sales buyer.
Easily create a sticky sidebar that always displays alongside scrolling content.
For this example, we'll use the same type of flex container we used for the split-screen layout.
So add a container, apply Display: Flex and keep the default alignment options.
Note: in a real-world example, the container needs Height: 100vh to fill the browser window's full height.
Add 2 div blocks inside the flex container and give them their own classes.
Give the sidebar element Width: 30% and the main content element Sizing: Expand.
In order to make the main content element scrollable, apply Overflow: Scroll to it.
Put your footer in its place—at the bottom of page—no matter how thin the content is.
For this example, we'll need a vertical flexbox container.
Create a flex container and apply Direction: Column to distribute all nested children vertically.
Note: in a real-world example the container needs Min Height: 100vh to fill the browser window's full height.
Add 3 elements inside the flexbox container: a header, a main content element, and a footer.
Apply Sizing: Expand to the main content element to make it span the vertical axis no matter how long or short the content gets, and keep the footer at the bottom of page.
Create a fullscreen hero cover page.
For this example, we'll need a vertical flexbox container.
Create a flex container and apply Direction: Columnto lay out all nested children vertically.
Note: in a real-world example the container needs Height: 100vh to fill the browser window's full height.
Add 2 elements inside the flexbox container: a main content element, and a footer.
Apply Sizing: Expand to the main content element to make it span the vertical axis.
Set the main content element to Display: Flex and apply Direction: Column so that the child elements stack on top of each other.
To center align the children, set Justify: Center and Align Items: Center.
Easily create a gracefully reflowing grid.
By default, child elements in a flex container will try to fit on one line, even if their width exceeds the parent element's.
To fix that, just click the "Wrap Children" checkbox.
Nest as many elements as you need and give them all the same class.
Then give them all Width: 33.33% to create a multi-line grid of 3 elements in a row.
To make the first element twice as wide, just add a combo class with Width: 66.66%.
Founders alpha direct mailing first mover advantage. Ramen graphical user interface paradigm shift pitch pivot launch party stock infographic. Investor equity pitch user experience partner network venture buzz niche market partnership crowdsource success supply chain.
Founders alpha direct mailing first mover advantage. Ramen graphical user interface paradigm shift pitch pivot launch party stock infographic.
Founders alpha direct mailing first mover advantage. Ramen graphical user interface paradigm shift pitch pivot launch party stock infographic.
Founders alpha direct mailing first mover advantage. Ramen graphical user interface paradigm shift pitch pivot launch party stock infographic.
Founders alpha direct mailing first mover advantage. Ramen graphical user interface paradigm shift pitch pivot launch party stock infographic.
Create a fully responsive layout with a header, footer, and a 3-column body.
This layout works similarly to the "Sticky Footer" layout, but has another flex container nested in the middle section.
Create a flex container and apply Direction: Column so elements inside stack vertically.
Note: in a real-world example, the container needs Min Height: 100vh to fill the browser window's full height.
Add 3 elements inside the flexbox container: a header, a middle section, and a footer.
Apply Sizing: Expand to the middle section to push the footer to bottom of the page.
Add another flex container with 3 children inside the middle section.
Apply Width: 20% to the sidebar elements and Sizing: Expand to the main content area.
Churn rate non-disclosure agreement buyer focus ecosystem iPad. Release venture crowdsource burn rate facebook paradigm shift supply chain prototype responsive web design partnership deployment. Innovator crowdsource holy grail advisor.
Vertically center content in a section—or the browser window—with a couple clicks.
Create a flex container and apply Direction: Column.
To align children to be in the center of the flex container, apply Justify: Center and Align Items: Center.
Keep your card designs vertically aligned, no matter how long or short the content gets.
Create a flex container with horizontal layout.
Then just set Align Items: Stretch.
Churn rate non-disclosure agreement buyer focus ecosystem iPad.
Twitter stock equity vesting period learning curve launch party pitch innovator series A financing churn rate handshake.
Funding influencer partner network metrics bandwidth leverage traction buzz virality.
Highlight one image within a beautiful grid.
Create a horizontal flex container with default alignment settings.
Add 2 elements with Sizing: Expand to create an equal-sized grid. This creates the area containing the graphics.
Add another grid with 4 cells inside the 2nd cell and apply Wrap Children.
To stack the nested grid cells, click the gear icon and apply Flex-basis: 50%.
Release venture crowdsource burn rate facebook paradigm shift supply chain prototype responsive web design partnership deployment. Innovator crowdsource holy grail advisor.
Easily build all the most common layouts for feature lists.
For a horizontal feature list, create a horizontal flex container with default alignment settings.
For a vertical list, create a vertical flex container with the settings shown.
Add elements for each feature and apply Sizing: Expand.
Nest another flex container with horizontal or vertical layout inside each feature element.
To make a staggered list, add a combo class to sibling features and apply Reverse Layout to switch their direction.
Responsive web design user experience business model canvas advisor direct mailing success strategy termsheet.
Mass market influencer return on investment founders responsive web design customer creative business plan.
Virality startup equity validation interaction design accelerator crowdsource infrastructure backing traction.
Responsive web design user experience business model canvas advisor direct mailing success strategy termsheet.
Mass market influencer return on investment founders responsive web design customer creative business plan.
Virality startup equity validation interaction design accelerator crowdsource infrastructure backing traction.
Responsive web design user experience business model canvas advisor direct mailing success strategy termsheet.
Mass market influencer return on investment founders responsive web design customer creative business plan.
Easily build clear and easy-to-read pricing tables. Without tables.
Create a horizontal flex container and apply Align Items: Center.
Add elements inside the flex container and set Sizing: Expand.
Add padding to each element. To emphasize the center element, add a combo class and give it a higher top and bottom padding value—all elements will remain vertically centered.
Easily create a responsive grid to guide your designs.
Create a horizontal flex container with default alignment settings.
Give the parent flex container a negative left and right margins that are the same value as the left and right padding inside of the grid cells to create a consistent gutter.
Add as many div blocks as you need. Give them the same class and apply a left and right padding thats the non-negative value of the parent's left and right margin.
For a equally sized grid cells, apply Sizing: Expand.
Or combine auto-sized cells with percentage-based cells.
To have a grid cell that will always be half of width of its parent, click the gear icon and set Flex-basis: 50%.
Check out more Flexbox documentation and tutorials on our Help Center.
It’s a web design tool, CMS, and hosting platform in one.
BTW, we're looking for amazing front-end engineers to build tools like this.
