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 - https://www.youtube.com/watch?v=YozReABRmzo
• CSS Flex Wrap (flex-wrap) Explained - https://www.youtube.com/watch?v=kuEfNr5H8wE
• CSS Flex Basis (flex-basis) Explained - https://www.youtube.com/watch?v=qdf9Qa0xJe4
• How to Vertical Align with CSS Flexbox - https://www.youtube.com/watch?v=LdqoJHcuyso