Flexbox parent align-items overriding child justify-content

Question

In the following code, if I comment out the align-items line in flex-column, the background is gray and space exists between the icons. If I uncomment the align-items, the background is blue and the icons are centered together.

I've thought of align-items and justify-content as orthogonal to each other - why is align-items affecting a flexbox spacing issue in a child flexbox container? Doesn't the width start at 100%?

I would assume it would only manage its direct children. Further, the entire area is blue when align-items is active, shouldn't I at least see the background of the icons as gray?

.flex-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: blue;
}

.flex-row {
  display: inline-flex;
  flex-direction: row;
  justify-content: space-between;
  background-color: gray;
}

  <div class="flex-column">
      <div>Some Content0</div>
      <div>Some Content1</div>
      <div class="flex-row" style='border: solid;'>
        <img src="update.svg" style="max-width: 20px;">
        <img src="update.svg" style="max-width: 20px;">
      </div>
      <div>Some Content2</div>
      <div>Some Content3</div>
  </div>

Michael Benjamin Michael Benjamin · Accepted Answer · 2018-01-25T17:39:21

The parent flex container is set to column-direction. This means that the main axis is vertical and the cross axis is horizontal.

The align-items property works only along the cross axis.

So when you set the container to:

align-items: center

... the child (.flex-row) is horizontally centered.

Basically, all free space on either side of the flex item is consumed, causing the item to be centered.

The parent's background color (blue) is displayed because the child's background color (gray) has been squeezed to the center, and lies behind the images.

When you disable align-items: center on the parent, the default stretch value is restored on the child.

The child (.flex-row) is, unlike its parent, a row-direction container. So the main axis is horizontal and the cross axis is perpendicular.

The justify-content property works only along the main axis. So in this case, it works in the same direction as align-items on the parent.

With justify-content: space-between on the child container and align-items: stretch on the parent container, the images and the child's gray background color have access to the full length of the container.

Doesn't the width start at 100%?

Often, yes. But in any case, you've overridden full-length with centering.

Maybe you're thinking that only the content (the images) should be centered and not the flex items. That's not exactly how it works. There are three independent levels in a flex container:

the container
the items
the content

Here's a more complete explanation (it focuses on Grid but the concepts apply to flex, as well):

Flexbox parent align-items overriding child justify-content

2 Answers