Position a flexbox item's child at the bottom of its container

Question

flex-item's are positioned horizontally along the flex line.

I want each flex-item to be the same height while positioning their flex-item-three to the bottom - with flex-item-one at the top and flex-item-two directly below it.

<div id="flex-container">
  <div class="flex-item">
    <div class="flex-item-one"></div>
    <div class="flex-item-two"></div>
    <div class="flex-item-three"></div>
  </div>
  <div class="flex-item">
    ...
  </div>
  <div class="flex-item">
    ...
  </div>
  ...
</div>

#flex-container {
    display: flex;
}

score 3 · Accepted Answer · edited May 23 '17 at 12:08

A flex auto margin on flex-item-2 or flex-item-3 will do the job.

.flex-item-two {
    margin-bottom: auto;
}

.flex-item-two {
    margin-bottom: auto;
}
#flex-container {
    display: flex;
    height: 100vh;
}
.flex-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    border: 1px dashed blue;
}
.flex-item-one { background-color: chartreuse; width: 100%; height: 50px; }
.flex-item-two { background-color: goldenrod; width: 100%; height: 50px; }
.flex-item-three { background-color: rebeccapurple; width: 100%; height: 50px; }
body { margin: 0; }

<div id="flex-container">
    <div class="flex-item">
        <div class="flex-item-one"></div>
        <div class="flex-item-two"></div>
        <div class="flex-item-three"></div>
    </div>
    <div class="flex-item">
        <div class="flex-item-one"></div>
        <div class="flex-item-two"></div>
        <div class="flex-item-three"></div>
    </div>
    <div class="flex-item">
        <div class="flex-item-one"></div>
        <div class="flex-item-two"></div>
        <div class="flex-item-three"></div>
    </div>
</div>

OR

.flex-item-three {
    margin-top: auto;
}

.flex-item-three {
    margin-top: auto;
}
#flex-container {
    display: flex;
    height: 100vh;
}
.flex-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    border: 1px dashed blue;
}
.flex-item-one { background-color: chartreuse; width: 100%; height: 50px; }
.flex-item-two { background-color: goldenrod; width: 100%; height: 50px; }
.flex-item-three { background-color: rebeccapurple; width: 100%; height: 50px; }
body { margin: 0; }

<div id="flex-container">
    <div class="flex-item">
        <div class="flex-item-one"></div>
        <div class="flex-item-two"></div>
        <div class="flex-item-three"></div>
    </div>
    <div class="flex-item">
        <div class="flex-item-one"></div>
        <div class="flex-item-two"></div>
        <div class="flex-item-three"></div>
    </div>
    <div class="flex-item">
        <div class="flex-item-one"></div>
        <div class="flex-item-two"></div>
        <div class="flex-item-three"></div>
    </div>
</div>

More details here: Methods for Aligning Flex Items

In your 2nd example it seems I was missing, critically, flex-item style="display: flex; flex-direction: column;". flex-item-three style="margin-top: auto;" alone won't do it. Thanks - nice docs! — gr8scott06, Sep 19 '16 at 00:47

Position a flexbox item's child at the bottom of its container

1 Answers1