Flexbox layouts in Webflow - Web design tutorial

Flexbox is a versatile layout property essential for creating responsive web designs and is used by Apple, Google, Medium, Awwwards, and other design leaders. Learn how to align, justify and wrap elements effortlessly, providing you with the tools to craft dynamic and visually appealing layouts on the web.
00:00 - Introduction to flexbox
00:51 - Set flexbox on the parent element
01:48 - Flex alignment controls
02:44 - Flex children controls
04:03 - Flexbox & auto margin
06:04 - Flex wrapping for layouts like category tags wrapper
We created Layout Land to help apply flexbox and other layout tools → layout-land-production.webflo...
Learn more at Webflow University → university.webflow.com/lesson...
----------
Get started with Webflow: wfl.io/2r7cVUW
Join the Webflow Community: webflow.com/community
webflow.com
/ webflow
/ webflow
/ webflow

[@JustBrenton]

I'm always impressed by the quality of Webflow's content. You can turn to Webflow for literally any best practice examples. This company is easily the gold standard in tech. Hope whoever reads this has a great day. Cheers

[@turisma_music]

That's why I decided to stay with Webflow when everyone suddenly switched to other tools. Webflow is on a different level, like Apple - maybe they don't have something yet, but once they have it, it's much better. Plus, I trust them more than other new, trendy tools.

[@EmilyMarais]

Really liked this presenter. Clear and engaging. Thanks for the great content Webflow!

[@hey_benjamin]

Fantastic! Been wishing for this level of flexbox control for ages. Just like real life. Thank you Webflow 🎉

[@RobHope]

Damn this was good. Seen a billion Flexbox tuts and this is way up there. Kudos to presenter too, very clear.

[@user-ei9nl1jz2i]

This video was so carefully created and presented, from production to post-production until the presentation.
Oh my god, such a fantastic team you are!
Congrats from Germany :)

[@lpbbell]

Thank you Webflow for mentioning web accessibility in your tutorials.💫

[@AldisLealOn]

How great that interface looks... excellent explanation!

[@IrinaSekletina]

Thank you for the tutorial! Wonderful quality!

[@SamAnthonyDesign]

I always say, you don't need to know CSS and code to use Webflow. But understanding key concepts like flex box and the powerful applications of it makes such a difference to someone's ability to create amazing layouts in Webflow.

[@the-secrettutorials]

This improved a near perfect product!

[@felipeulloa2245]

Wow thanks, I really needed to know how flexbox work!

[@kafiahammed3548]

This is why i love Webflow 😍

[@Di.zzi.y]

Webflow is getting even more hot day by day . 🤘

[@staticmotion1628]

love this !!!!!! thank you

[@webdesignlondon]

This is so similar to how Elementor works on WordPress. This will speed up my learning time of Webflow. :)

[@aliez5026]

Wow 🎉 amazing update

[@mrprofessor999]

@webflow Amazing ❤

[@DimTragic]

Much much better presenter.

[@wfwfwfwfwfwf]

Hi great tutorial, didn't know the margin trick to stick the button to the bottom. Just a question, at 2:35 you mention to use ALT + click in the align box to enable Space around, but it doesn't work for me, any thoughts? It makes the other axis stretch. CMD + click or double-click does enable Space between.

[@Webflow]

Hello!
Holding down Option/Alt on the keyboard and then clicking in the align box will stretch flex children.
Holding down Command/Control on the keyboard and then clicking in the align box will add space between flex children.

[@shinobi_coder88]

2:33 - What about space around? what's the keyboard shortcut?

[@Human_Evolution-]

Is there a way to grab the CSS code once this is finished to add it to a site? If not, what exactly is the purpose of this? Just to show how it could and should look on a site? It really needs an option to convert into code.

[@Webflow]

Hello! There are two ways you can look at the CSS from Webflow:
1. You can export the code from an entire site by clicking the button that looks like at the top right corner and copy what you need.
2. You can use CSS preview and copy the CSS of any selected class. To access CSS preview, go to the Help icon in the bottom left corner (it has a question mark), and then click CSS preview.

[@Human_Evolution-]

@@Webflow thanks I will check it out.

[@yvesnathan6966]

All we need now is a way to support MP3 files for background music.

[@TheMarouuu]

Where's inline-block, inline ?
edit: nvm, found it under none.
I personally don't like the change but it is what it is.

[@jdanielortega]

If Flex vertical still exists, why is Block still around?

[@schultzeworks]

Legacy support, most likely. Drop it now and you’d get complaints from the opposite direction. Just like real life, change brings ….complaints.

[@abdullahalrumman09]

I think previous layout was better

[@77asare]

2:46 - just like real life 😄😄.

[@mollyhart3252]

I cannot find the flex layout box. It doesn't look like you show in the video.

[@Webflow]

Hello! This is the new layout changes in the Webflow Designer. Learn more here: webflow.com/updates/style-panel-layout-improvements

[@mollyhart3252]

@@Webflow It looks like I was a little early. I look forward to the new UI. Thanks for the quick response.

[@mr.fanstastic9010]

@@Webflow Not to be disrespectful, but the idea of changing panels and layout is stupid, it's becoming difficult for both new and seasoned users to explore, why dont you leave the panel the way it is and then add new tools to it!