Cluster child elements at bottom of div with flexbox

Question

Using flexbox, I want the child elements of a div to sit at the bottom, with the first element full width and the remaining flexing into size/position. When I try to do this, however, the first element sits in the middle rather than at the bottom. Fiddle here.

.container {
  display: flex;
  flex-wrap: wrap;
  height: 300px;
  align-items: flex-end;
  box-sizing: border-box;
  border: 1px solid green;
}

.full-child {
  width: 100%;
  height: 30px;
  box-sizing: border-box;
  border: 1px solid blue;
}

.partial-child {
  height: 30px;
  box-sizing: border-box;
  border: 1px solid red;
}

.partial-child.one {
  flex-grow: 1;
}

<div class="container">
  <div class="full-child">a</div>
  <div class="partial-child one">b</div>
  <div class="partial-child two">c</div>
  <div class="partial-child three">d</div>
</div>

Note in the screenshot below how the blue div sits in the middle, rather than snug up against the red elements at the bottom.

How can I get my desired behavior, where the elements cluster together at the bottom of the div?

This is the default behavior of flex lines in a wrap-enabled container. You need to adjust the `align-content` property. Here's a complete explanation: https://stackoverflow.com/q/42613359/3597276 — Michael Benjamin, Aug 16 '17 at 12:34

score 1 · Answer 1 · answered Aug 14 '17 at 22:11

Instead of align-items you should use align-content because initial value is stretch. This positions items along cross-axis which is y in you case because of row direction.

.container {
  display: flex;
  flex-wrap: wrap;
  height: 300px;
  align-content: flex-end;
  box-sizing: border-box;
  border: 1px solid green;
}
.full-child {
  width: 100%;
  height: 30px;
  box-sizing: border-box;
  border: 1px solid blue;
}
.partial-child {
  height: 30px;
  box-sizing: border-box;
  border: 1px solid red;
}

  <div class="container">
    <div class="full-child">a</div>
    <div class="partial-child one">b</div>
    <div class="partial-child two">c</div>
    <div class="partial-child three">d</div>
  </div>

score 1 · Accepted Answer · answered Aug 14 '17 at 22:11

Do

 align-content: flex-end;

That will impact the positioning on the opposite axis.

.container {
  display: flex;
  flex-flow: row;
  flex-wrap: wrap;
  height: 300px;
  align-content: flex-end;
  box-sizing: border-box;
  border: 1px solid green;
}

.full-child {
  width: 100%;
  height: 30px;
  box-sizing: border-box;
  border: 1px solid blue;
}

.partial-child {
  height: 30px;
  box-sizing: border-box;
  border: 1px solid red;
}

.partial-child.one {
  flex-grow: 1;
}

<div class="container">
  <div class="full-child">a</div>
  <div class="partial-child one">b</div>
  <div class="partial-child two">c</div>
  <div class="partial-child three">d</div>
</div>

Cluster child elements at bottom of div with flexbox

2 Answers2