GuideLabGlossary

Stretch flex items if align-self resolves to stretch

Flex items have a final say, but they can ask the flex container what to do

This is why the title of the chapter says that we need to check if align-self resolves to stretch.

We say “resolve” because align-self either has a specific value, or has auto and listens to the flex container’s value.

align-self: centeralign-self: autoalign-items: center12I know exactly what I want myselfI’ll resolve this by asking the flex containerResolved!center, please

By default, flex items listen to their parent aka flex container

The initial value of align-self is auto, which means each flex item uses the value suggested by the flex container’s property.

INITIAL PROPERTY VALUEalign-self: auto1How should flex items align themselves?align-items: center

By default, the flex container suggests to its flex items that they stretch.

The initial value of is normal.

1How should flex items align themselves?INITIAL PROPERTY VALUEalign-items: normal

can be used in different types of layout, and normal might mean different things in those other layout types.

align-items: normalFLEXBOXGRIDAB

But in Flexbox, normal is the same as stretch.

align-items: normalFLEXBOXGRIDABalign-items: stretch

So, each flex item says “my align-self is auto, so I’ll use the flex container’s : normal”.

1Myso I’ll use the flexcontainer’swhich in Flexbox means.is,,align-selfautoalign-items: normalalign-items: stretch

This stretching can happen no matter if the flex container allows wrapping or not.

Flex lines would only get stretched if the flex container allowed multiple flex lines in the first place.

I don’t allow flex items to wrap withSo all flex items will be on a single flex line.I’m the only flex line,always the size of the flex container.flex-wrap: nowrap

The situation here is different, because the flex items can always have different sizes and they don’t care if other flex lines exist or not.

11Even if there’s only one flex line, I can still stretch.

If a flex item that gets stretched has an aspect ratio, then this will affect its size in the main axis.

For example, this happens when you stretch an img element.

The browser tries to prevent the image from being squished, so it has to make the flex item bigger in the main axis.

If I’m going to stretch in the cross axis, I’ll change my size in the main axis to preserve my aspect ratio.

Wait, I thought we calculated the main size already?

Yeah, this part is a little weird.

What happens is the flex item already knows ahead of time that it will be doing this stretching. So it requests a flex base size that accounts for this in that earlier step.

flex-basis