How to Make Flexbox Vertical - Beginner CSS Flexbox Tutorial
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...
En esta página del sitio puede ver el video en línea How to Make Flexbox Vertical - Beginner CSS Flexbox Tutorial de Duración hora minuto segunda en buena calidad , que subió el usuario Front End Beginners 22 noviembre 2021, comparta el enlace con amigos y conocidos, en youtube este video ya ha sido visto 4,622 veces y le gustó 31 a los espectadores. Disfruta viendo!
