CSS Flexbox "justify-content: center" Explained - Beginner Tutorial
In this tutorial, we look at "justify-content: center" in CSS Flexbox.
The "justify-content" property aligns items along the "main axis", which always runs along the same plane as the "flex-direction" of the parent container—either horizontally or vertically, based upon "flex-direction: row" or "flex-direction: column".
"justify-content: center" takes any free space inside the parent flex container, divides it in half, and distributes it equally on either side of the child flex items, forcing them together in the center of the container. Note that this alignment works only along the main axis—any free space on the cross axis is ignored.
"justify-content: center" works with a single flex item, or with multiple flex items. As long as there is free space on the main axis, items will be centrally aligned.
We'll look at how this works in both the row and column directions, and how the cross axis is ignored—cross axis alignment is controlled by the "align-items" property, which is a topic for another video.
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 Default positioning—"justify-content: flex-start"
01:42 How "justify-content: center" works
02:40 Working with multiple flex items
03:41 "justify-content" and the cross axis
05:36 "justify-content: center" and the "column" direction
06:55 Summary
WATCH NEXT:
• CSS Flexbox "justify-content: space-between" Explained - • CSS Flexbox "justify-content: space-betwee...
• CSS Flex Direction (flex-direction) Explained - • CSS Flex Direction (flex-direction) Explai...
• How to Perfectly Center and Element Using CSS Flexbox - • How to Perfectly Center an Element Using C...
На этой странице сайта вы можете посмотреть видео онлайн CSS Flexbox "justify-content: center" Explained - Beginner Tutorial длительностью часов минут секунд в хорошем качестве, которое загрузил пользователь Front End Beginners 31 Октябрь 2021, поделитесь ссылкой с друзьями и знакомыми, на youtube это видео уже посмотрели 1,461 раз и оно понравилось 16 зрителям. Приятного просмотра!
