How to Make Flexbox Vertical - Beginner CSS Flexbox Tutorial

Veröffentlicht am: 22 November 2021
auf dem Kanal: Front End Beginners

4,622

In this tutorial, we'll look at how to make vertical layouts with CSS Flexbox.

By default, the parent flex container has a "flex-direction" value of "row", which means our child flex items are laid out side-by-side.

The simplest way to stack our items one on top of the other and create a vertical layout is by changing "flex-direction" to "column".

Alternatively, you can remain in the "row" direction and give each flex item a "flex-basis" value of "100%", while setting "flex-wrap" to "wrap" on the parent container.

This makes each flex item full-width and each occupies its own row, making a vertically-stacked layout.

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:22 Default horizontal layout—"flex-direction: row"
00:54 Making a vertical layout with "flex-direction: column"
02:10 Making a vertical layout with "flex-wrap: wrap"
03:57 Summary

WATCH NEXT:
• CSS Flex Grow (flex-grow) Explained -    • CSS Flex Grow (flex-grow) Explained -...
• CSS Flex Wrap (flex-wrap) Explained -    • CSS Flex Wrap (flex-wrap) Explained -...
• CSS Flex Basis (flex-basis) Explained -    • CSS Flex Basis (flex-basis) Explained...
• How to Vertical Align with CSS Flexbox -    • How to Vertical Align with CSS Flexbo...

Auf dieser Seite können Sie das Online-Video How to Make Flexbox Vertical - Beginner CSS Flexbox Tutorial mit der Dauer stunde minuten sekunde in guter Qualität ansehen, das der Benutzer Front End Beginners 22 November 2021 hochgeladen hat, den Link mit Freunden und Bekannten teilen, dieses Video wurde auf Youtube bereits 4,622 Mal angesehen und es wurde von 31 den Zuschauern gefallen. Viel Spaß beim Betrachtenden Zuschauern gefallen!

48,554

276