CSS Flex Wrap (flex-wrap) Explained - Beginner Flexbox Tutorial

Опубликовано: 28 Октябрь 2021
на канале: Front End Beginners

1,800

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...

На этой странице сайта вы можете посмотреть видео онлайн CSS Flex Wrap (flex-wrap) Explained - Beginner Flexbox Tutorial длительностью часов минут секунд в хорошем качестве, которое загрузил пользователь Front End Beginners 28 Октябрь 2021, поделитесь ссылкой с друзьями и знакомыми, на youtube это видео уже посмотрели 1,800 раз и оно понравилось 21 зрителям. Приятного просмотра!

47,152

4 тыс