In this tutorial, we look at the difference between "justify-content" vs. "align-items" in CSS Flexbox.

"justify-content" allows us to position items along the "main axis", which always runs in the same direction as the parent "flex-direction" property.

"align-items" allows us to position items along the "cross axis", which runs perpendicular/opposite to the main axis.

Each property can be used individually, or both can be combined together to position items in a variety of ways inside the parent flex container.

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:28 "Main axis" vs. "cross axis"
01:51 "justify-content" vs. "align-items"
02:40 How "justify-content" works
04:00 How "align-items" works
05:05 Combining "justify-content" and "align-items"
06:18 Summary

WATCH NEXT:
• CSS Flexbox "justify-content: center" Explained - [ Ссылка ]
• CSS Flexbox "justify-content: space-between" Explained - [ Ссылка ]
• CSS Flex Grow (flex-grow) Explained - [ Ссылка ]

свернуть