gr8scott06 gr8scott06 - 2 months ago 6
CSS Question

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

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;
}

Answer

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

Comments