align-content not working on flex items

Question

The fact that align-content “works” when the primary flex container is switched to display: block is simply a browser bug.

It shifts the flex items to the bottom, as desired, but only in Firefox.

In Chrome it doesn’t do anything, which is the correct behavior (per the spec).

And in IE11 it shifts the items to the top (also nonconformant).

These are bugs and inconsistencies that shouldn’t be relied upon for guidance, as they don’t help to explain how the align-content property works.

In a single line flex container, like the one in the question, align-content has no effect. The property to use is align-items.

In a multi-line flex container, the property to use is align-content.

Also, the align-self property is closely related to align-items. One is designed to override the other. They both function together.

From the spec:

8.3. Cross-axis Alignment: the align-items and align-self properties

align-items sets the default alignment for all of the flex container’s items, including anonymous flex items. align-self allows this default alignment to be overridden for individual flex items.

8.4. Packing Flex Lines: the align-content
property

The align-content property aligns a flex container’s lines within the
flex container when there is extra space in the cross-axis, similar to
how justify-content aligns individual items within the main-axis.
Note, this property has no effect on a single-line flex container.

In terms of this question, forget about align-content. It’s useless (unless your flex items wrap).

Simply use align-items: flex-end (or align-self: flex-end on the span‘s):

body {
  background-color: grey;
}
.column {
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-items: stretch;
  background-color: green;
}
.row {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  align-content: flex-end;        /* will work when items have wrapped */
  align-items: flex-end;          /* adjusted; works when items in one line */
  background-color: red;
}
.row-test {
  min-height: 200px;
}
span {
  width: 30%;
  background-color: orange;
  /* align-self: flex-end;     this would also work on single line container */
}

<body class="column">
  <section class="row row-test">
    <span>Test Test Test Test Test Test Test Test Test</span>
    <span>Test Test Test Test Test Test Test Test Test Test Test 
          Test Test Test Test Test Test Test Test Test Test Test</span>
  </section>
</body>

Leave a Comment Cancel reply