将flexbox项的子项放在其容器的底部

Question

flex-item沿柔性线水平放置。

我希望每个flex-item在将flex-item-three放在底部时具有相同的高度 - 顶部为flex-item-one，而正下方为flex-item-two。

<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 1

auto或flex-item-2上的flex-item-3 {{{}}余量可以完成工作。

.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>

此处有更多详情：Methods for Aligning Flex Items