1

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>
Joe
  • 1,014
  • 1
  • 13
  • 28

2 Answers2

3

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):

Learn more about flex alignment along the main axis here:

Learn more about flex alignment along the cross axis here:

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
  • 1
    There were two concepts I thought I understood, but didn't. The first was content vs. the item. The second was not realizing the main axis definition was dependent on the direction. After understanding this, a lot of articles suddenly make more sense. I made a few changes for future viewers, I added some block items to show that I was trying to vertically align all items, and then expand the icons. To get it working, I set the parent container to justify-content instead of align-items as you mentioned. The content was shifted left, so I used text-align: centered on the parent container. – Joe Jan 25 '18 at 19:36
  • 1
    To really grasp the concepts discussed in my answer, see the link references I posted. They should cover 70% of what you need to know. For another 20%, see my answers [**here**](https://stackoverflow.com/q/19026884/3597276) and [**here**](https://stackoverflow.com/q/25311541/3597276). And for everything else see the top answers [**here**](https://stackoverflow.com/users/3597276/michael-b?tab=answers&sort=votes). Then you're an expert :-) Cheers and good luck! – Michael Benjamin Jan 25 '18 at 19:43
1

On a flex column container the align-items affect the cross axis (horizontal), and with its default value stretch, makes its flex item's fill its width (be 100% wide).

When you change that to center, it will be the items width that control whether they fill its parent's width, and since yours doesn't, they will, as you told them to (align-items: center), center nicely.

Asons
  • 84,923
  • 12
  • 110
  • 165