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

Пікірлер: 35

  • @JustBrenton
    @JustBrenton4 ай бұрын

    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

    @turisma_music

    4 ай бұрын

    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
    @EmilyMarais4 ай бұрын

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

  • @user-ei9nl1jz2i
    @user-ei9nl1jz2i4 ай бұрын

    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 :)

  • @desertislanddivs
    @desertislanddivs4 ай бұрын

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

  • @RobHope
    @RobHope4 ай бұрын

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

  • @AldisLealOn
    @AldisLealOn4 ай бұрын

    How great that interface looks... excellent explanation!

  • @lpbbell
    @lpbbell4 ай бұрын

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

  • @IrinaSekletina
    @IrinaSekletina4 ай бұрын

    Thank you for the tutorial! Wonderful quality!

  • @felipeulloa2245
    @felipeulloa22454 ай бұрын

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

  • @the-secrettutorials
    @the-secrettutorials4 ай бұрын

    This improved a near perfect product!

  • @kafiahammed3548
    @kafiahammed35484 ай бұрын

    This is why i love Webflow 😍

  • @staticmotion1628
    @staticmotion16284 ай бұрын

    love this !!!!!! thank you

  • @SamAnthonyDesign
    @SamAnthonyDesign4 ай бұрын

    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.

  • @aliez5026
    @aliez50264 ай бұрын

    Wow 🎉 amazing update

  • @Di.zzi.y
    @Di.zzi.y4 ай бұрын

    Webflow is getting even more hot day by day . 🤘

  • @webdesignlondon
    @webdesignlondon4 ай бұрын

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

  • @mrprofessor999
    @mrprofessor9994 ай бұрын

    @webflow Amazing ❤

  • @DimTragic
    @DimTragic2 ай бұрын

    Much much better presenter.

  • @wfwfwfwfwfwf
    @wfwfwfwfwfwf4 ай бұрын

    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

    @Webflow

    4 ай бұрын

    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
    @shinobi_coder8824 күн бұрын

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

  • @Human_Evolution-
    @Human_Evolution-4 ай бұрын

    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

    @Webflow

    4 ай бұрын

    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-

    @Human_Evolution-

    4 ай бұрын

    @@Webflow thanks I will check it out.

  • @yvesnathan6966
    @yvesnathan69664 ай бұрын

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

  • @jdanielortega
    @jdanielortega4 ай бұрын

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

  • @schultzeworks

    @schultzeworks

    4 ай бұрын

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

  • @TheMarouuu
    @TheMarouuu4 ай бұрын

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

  • @mollyhart3252
    @mollyhart32524 ай бұрын

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

  • @Webflow

    @Webflow

    4 ай бұрын

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

  • @mollyhart3252

    @mollyhart3252

    4 ай бұрын

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

  • @mr.fanstastic9010

    @mr.fanstastic9010

    2 ай бұрын

    @@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!

  • @abdullahalrumman09
    @abdullahalrumman094 ай бұрын

    I think previous layout was better

  • @77asare
    @77asare4 ай бұрын

    2:46 - just like real life 😄😄.