How to Vertical Align with CSS Flexbox - Beginner Tutorial

Publicado el: 02 noviembre 2021
en el canal de: Front End Beginners

2,530

In this tutorial, we look at how to vertical align with CSS Flexbox.

When working with a "flex-direction" of "row", you can vertically align all items using the "align-items" property (which works along the cross axis).

To vertically align individual flex items when working in the row direction, use the "align-self" property.

When working with a "flex-direction" of "column", you can vertically align all items using the "justify-content" property (which works along the main axis).

To vertically align individual flex items in the column direction, use "auto margins".

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:25 "flex-direction: row" and "align-items"
03:02 "flex-direction: row" and "align-self"
04:26 "flex-direction: column" and "justify-content"
05:39 "flex-direction: column" and auto margins
07:23 Summary

WATCH NEXT:
• CSS Flexbox "justify-content" vs. "align-items" -    • CSS Flexbox "justify-content" vs. "al...
• CSS Flexbox "justify-content: space-between" Explained -    • CSS Flexbox "justify-content: space-b...
• CSS Flex Direction (flex-direction) Explained -    • CSS Flex Direction (flex-direction) E...

En esta página del sitio puede ver el video en línea How to Vertical Align with CSS Flexbox - Beginner Tutorial de Duración hora minuto segunda en buena calidad , que subió el usuario Front End Beginners 02 noviembre 2021, comparta el enlace con amigos y conocidos, en youtube este video ya ha sido visto 2,530 veces y le gustó 29 a los espectadores. Disfruta viendo!

452