Back to Browse

CSS Flex Flow (flex-flow) Explained - Beginner Flexbox Tutorial

1.7K views
Oct 29, 2021
4:39

In this tutorial, we look at the "flex-flow" property in CSS Flexbox. "flex-flow" is shorthand for both the "flex-direction" and "flex-wrap" properties. It accepts two keywords as its value, one each for the flex-direction and flex-wrap properties. By default, flex-flow is set to "row nowrap", where the main axis runs in the horizontal direction and items are not allowed to wrap onto new rows. I hope you found this video helpful. If you have any questions, please leave them in the comments below and I'll do my best to answer as soon as possible. TIMESTAMPS: 00:00 Introduction 00:27 What is flex-flow? 01:23 Examples of flex-flow values 02:56 Using flex-flow in the column direction 04:03 Understanding flex-direction and flex-wrap 04:20 Summary WATCH NEXT: • CSS Flex Direction (flex-direction) Explained - https://www.youtube.com/watch?v=m7sGfDfll1E • CSS Flex Wrap (flex-wrap) Explained - https://www.youtube.com/watch?v=kuEfNr5H8wE • CSS Flex Grow (flex-grow) Explained - https://www.youtube.com/watch?v=YozReABRmzo • CSS Flex Basis (flex-basis) Explained - https://www.youtube.com/watch?v=qdf9Qa0xJe4

Download

1 formats

Video Formats

360pmp45.1 MB

Right-click 'Download' and select 'Save Link As' if the file opens in a new tab.

CSS Flex Flow (flex-flow) Explained - Beginner Flexbox Tutorial | NatokHD