CODEWITHSUNDEEP
htmlcssflexbox
gr8scott06
gr8scott06

Reputation: 931

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

Upvotes: 1

Views: 1972

Answers (1)

Michael Benjamin
Michael Benjamin

Reputation: 371889

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

Upvotes: 3

Related Questions