Flexbox layouts in Webflow - Web design tutorial

Поділитися
Вставка
  • Опубліковано 13 гру 2024

КОМЕНТАРІ • 37

  • @JustBrenton
    @JustBrenton 9 місяців тому +27

    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 9 місяців тому +2

      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.

  • @RobHope
    @RobHope 9 місяців тому +4

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

  • @EmilyMarais
    @EmilyMarais 9 місяців тому +8

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

  • @senorclouds
    @senorclouds 9 місяців тому +3

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

  • @marcelosoboll-c6p
    @marcelosoboll-c6p 9 місяців тому +3

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

  • @AldisLealOn
    @AldisLealOn 9 місяців тому +2

    How great that interface looks... excellent explanation!

  • @lpbbell
    @lpbbell 9 місяців тому

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

  • @felipeulloa2245
    @felipeulloa2245 9 місяців тому

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

  • @SamAnthonyDesign
    @SamAnthonyDesign 9 місяців тому

    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-iries
    @the-iries 9 місяців тому

    Thank you for the tutorial! Wonderful quality!

  • @the-secrettutorials
    @the-secrettutorials 9 місяців тому

    This improved a near perfect product!

  • @Di.zzi.y
    @Di.zzi.y 9 місяців тому

    Webflow is getting even more hot day by day . 🤘

  • @kafiahammed3548
    @kafiahammed3548 9 місяців тому

    This is why i love Webflow 😍

  • @webdesignlondon
    @webdesignlondon 9 місяців тому

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

  • @aliez5026
    @aliez5026 9 місяців тому

    Wow 🎉 amazing update

  • @shinobi_coder88
    @shinobi_coder88 5 місяців тому

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

  • @staticmotion1628
    @staticmotion1628 9 місяців тому

    love this !!!!!! thank you

  • @wfwfwfwfwfwf
    @wfwfwfwfwfwf 9 місяців тому

    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  9 місяців тому

      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.

  • @77asare
    @77asare 9 місяців тому +1

    2:46 - just like real life 😄😄.

  • @mrprofessor999
    @mrprofessor999 9 місяців тому

    @webflow Amazing ❤

  • @Human_Evolution-
    @Human_Evolution- 9 місяців тому

    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  9 місяців тому +1

      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- 9 місяців тому

      @@Webflow thanks I will check it out.

  • @DimTragic
    @DimTragic 7 місяців тому

    Much much better presenter.

  • @mollyhart3252
    @mollyhart3252 9 місяців тому +1

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

    • @Webflow
      @Webflow  9 місяців тому +1

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

    • @mollyhart3252
      @mollyhart3252 9 місяців тому +3

      @@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 6 місяців тому

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

  • @yvesnathan6966
    @yvesnathan6966 9 місяців тому

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

  • @TheMarouuu
    @TheMarouuu 9 місяців тому +1

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

  • @brainbowlofi
    @brainbowlofi 4 дні тому

    good quality video, but im really strugling with your flexbox or layout concept, it's confusing!

  • @jdanielortega
    @jdanielortega 9 місяців тому

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

    • @schultzeworks
      @schultzeworks 9 місяців тому

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

  • @abdullahalrumman09
    @abdullahalrumman09 9 місяців тому +3

    I think previous layout was better

  • @TrezStudio
    @TrezStudio Місяць тому

    Where is mr maguire ? 😢