CSS Flex Wrap (flex-wrap) Explained - Beginner Flexbox Tutorial
In this tutorial, we look at how to use "flex-wrap" in CSS Flexbox.
By default, Flexbox containers have a flex-wrap value of "nowrap". This means that all child flex items are forced onto a single row or column.
By giving our parent flex container a flex-wrap value of "wrap", we enable items to wrap onto new rows or columns—this allows us to size our flex items however we like, without being constrained to a single line.
"flex-wrap: wrap-reverse" works in the same way as "wrap", however the rows/columns are arranged in reverse order inside the parent flex container.
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:24 Default "flex-wrap: nowrap" behaviour
01:38 Using "flex-wrap: wrap"
02:19 Using "flex-wrap: wrap-reverse"
02:52 Accessibility and "flex-wrap: wrap-reverse"
03:49 "flex-wrap" and the column direction
04:09 Summary
WATCH NEXT:
• How to Make the First Flex Item Full Width - • How to Make the First Flex Item Full ...
• CSS Flex Grow (flex-grow) Explained - • CSS Flex Grow (flex-grow) Explained -...
• CSS Flex Order Explained - • Flex Order Explained - Beginner CSS F...
• CSS Flex Basis (flex-basis) Explained - • CSS Flex Basis (flex-basis) Explained...
On this page of the site you can watch the video online CSS Flex Wrap (flex-wrap) Explained - Beginner Flexbox Tutorial with a duration of hours minute second in good quality, which was uploaded by the user Front End Beginners 28 October 2021, share the link with friends and acquaintances, this video has already been watched 1,800 times on youtube and it was liked by 21 viewers. Enjoy your viewing!
