CSS Flexbox "align-items" vs. "align-content" - Beginner Tutorial

Описание

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

Both properties are used to position flex items along the cross axis, which always runs perpendicular to the flex-direction.

"align-items" positions flex items inside their own individual row or column—depending on the flex-direction value—while "align-content" distributes space between and around flex items inside the parent container as a whole.

We'll look at examples in both single- and multi-row Flexbox layouts and hopefully clarify the different uses for each property.

I hope you find 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:23 Using "align-items" with a single-row layout
02:13 Using other "align-items" values
03:44 Using "align-items" with multi-row layouts
07:27 How "align-content" works
11:21 Summary

WATCH NEXT:
• CSS Flexbox "justify-content" vs. "align-items" - https://www.youtube.com/watch?v=XCunlQyUgF0
• How to Create a CSS Flexbox Sidebar and Content Layout - https://www.youtube.com/watch?v=DtaSNnHky2w
• How to Create Cards with CSS Flexbox - https://www.youtube.com/watch?v=LVPXBLzgbdA
• How to Justify a Single Flex Item - https://www.youtube.com/watch?v=EieBAUh8qwg