How to make a flex item not fill the height of the flex container?

Controlling alignment: Rise above the stretch

Dealing with the flex layout involves wrangling two key properties to control the vertical alignment of flex items: align-items and align-self.

Using align-items playground

The align-items property acts on a flex container, dictating how its children (the flex items) are positioned along the cross, or vertical axis.

• align-items: flex-start: Kids, time to line up at the start of the line!
• align-items: flex-end: March your way to the end of the line, soldiers!
• align-items: center: Find your zen in the center of the line.

The align-self rebel

align-self says a distinctive "I'm unique", overriding the container's align-items for individual flex items.

• align-self: flex-start: I prefer starting at the top, thank you.
• align-self: center: I'm all about balance - center is the way to go.
• align-self: flex-end: No one puts me in the middle, I'm off to the end!

Visual illustration: Text alignment on paper

Let's visually illustrate these concepts using flex items as lines of text within a paragraph block:

Paragraph block: [ "This",  
                   "is",   
                   "a",    
                   "sample"]

Align the word "is" to the top using:

.is {
  align-self: flex-start; /* Look ma, I'm at the top! */
}


After applying align-self:

Paragraph block: [ "This",  
     "is" —— Woo-hoo, top of the world! 
                   "a",    
                   "sample"]

Dealing with Wrapping: The saga continues

When it comes to handling multi-line flex containers, align-content steps in as the unsung hero. Specially useful when space distribution is at stake.

The flex-wrap factor

Should your flex container choose to flex-wrap: wrap and form multiple lines of content, align-content is your knight in shining armor:

• align-content: flex-start: Who likes the top view? Lines do.
• align-content: flex-end: Lines are heading down, enjoy the descent!
• align-content: center: Lines huddle up in the center. So cozy!
• align-content: space-around: Lines enjoying personal space, with a touch of compromise.
• align-content: space-between: Lines spread out in perfect harmony, no squishing at the edges.
• align-content: space-evenly: Lines love equality - same space all around!

Pitfalls and traps

Watch out for the default align-self setting of stretch, which can still make a flex item appear to stretch vertically. In such cases, it's time to step in and override align-self to auto, flex-start, or any other non-stretch value.