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

Veröffentlicht am: 28 Oktober 2021
auf dem Kanal: 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...

Auf dieser Seite können Sie das Online-Video CSS Flex Wrap (flex-wrap) Explained - Beginner Flexbox Tutorial mit der Dauer stunde minuten sekunde in guter Qualität ansehen, das der Benutzer Front End Beginners 28 Oktober 2021 hochgeladen hat, den Link mit Freunden und Bekannten teilen, dieses Video wurde auf Youtube bereits 1,800 Mal angesehen und es wurde von 21 den Zuschauern gefallen. Viel Spaß beim Betrachtenden Zuschauern gefallen!

1,925