Question

我有一个列表，其中每个li都有嵌套容器。我尝试为所有列表项保留相同的高度，并将最后一个div推到底部。我如何使用flex？

ul.list-container {
  display: inline-flex;
  justify-content: space-between;
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
}

ul.list-container > li {
  flex-grow: 1;
  min-width: 200px;
  background-color: #e3e3e3;
  height: 100%;
  width: 100%;
} 

ul.list-container > li > .pus-me-to-the-bottom {
  
  color: red;
  margin-top: 10px;

  // this should expand to the bottom
}

<ul class="list-container">
  <li>
    <div class="title">title</div>
    <div class="pus-me-to-the-bottom">title</div>
  </li>

   <li>
    <div class="title">
Audiam inciderint intellegebat ne est, cu pri quidam deseruisse persequeris, consetetur elaboraret duo at. Sed quod veniam disputando in. An nam ferri tollit, ea quod doming facete nam. Eum omittam periculis te, ad pri viris tempor.</div>
    <div class="pus-me-to-the-bottom">title</div>
  </li>
  
   <li>
    <div class="title">title</div>
    <div class="pus-me-to-the-bottom">title</div>
  </li>
  
   <li>
    <div class="title">title</div>
    <div class="pus-me-to-the-bottom">title</div>
  </li>

</ul>

这是codepen所有我正在尝试的内容

Answer 1

ul.list-container {
  display: inline-flex;
  justify-content: space-between;
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
}
ul.list-container > li {
  display: flex;             /* new; nested flex container */
  flex-direction: column;    /* new; stack flex items vertically */
  flex-grow: 1;
  min-width: 200px;
  background-color: #e3e3e3;
  /* height: 100%;           <-- remove to enable equal height columns; see reference #1 */
  width: 100%;
  border: 1px solid red;
}
ul.list-container > li > .pus-me-to-the-bottom {
  margin-top: auto;          /* new; see reference #2 */
  color: red;
  /* margin-top: 10px;       <-- remove */
  border: 1px solid black;
}

<ul class="list-container">
  <li>
    <div class="title">title</div>
    <div class="pus-me-to-the-bottom">title</div>
  </li>
  <li>
    <div class="title">
      Audiam inciderint intellegebat ne est, cu pri quidam deseruisse persequeris, consetetur elaboraret duo at. Sed quod veniam disputando in. An nam ferri tollit, ea quod doming facete nam. Eum omittam periculis te, ad pri viris tempor.</div>
    <div class="pus-me-to-the-bottom">title</div>
  </li>
  <li>
    <div class="title">title</div>
    <div class="pus-me-to-the-bottom">title</div>
  </li>
  <li>
    <div class="title">title</div>
    <div class="pus-me-to-the-bottom">title</div>
  </li>
</ul>

参考文献：

等高柱并将最后一个项对齐到底部

1 个答案: