Theory
Theory
Comments

The align-items property, alignment along the cross axis

Flexbox uses a property to align items along the cross axis, align-items, instead of simply assigning “vertical” alignment. This property is assigned on the flex container.

Its default value is stretch. It is thanks to this value that the flex items can be stretched to the entire height of the flex container. If the flex items are assigned a height, then they will not be stretched.

In order to align the items in the center of the cross axis, you need to assign the value center for align-items.

Let’s align the rugs in the center of the container room along the cross axis and make sure that the items are actually centered, even if they have different heights.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Flex items alignment, align-items</title> <link href="course.css" rel="stylesheet"> <link href="style.css" rel="stylesheet"> </head> <body class="house"> <div class="room"> <div class="rug rudolf"></div> <div class="rug muffin"></div> <div class="rug simba"></div> </div> </body> </html>

CSS

.room { display: flex; justify-content: center; align-items: stretch; } .rug { } .rug.muffin { }

Goalscompleted

Assign the height 150px to the rugs (.rug),
and then assign the flex item alignment for the .room block to the center of the cross axis,
and then assign the height 250px to Muffin’s rug (.muffin).

The align-items property, alignment along the cross axis

Comments

Log in

Sign up

Restore access