等高高度列，并将最后一个项目对齐到底部 [英] Equal height columns and align last item to bottom

问题描述

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

I have a list where each li has nested containers. I try to preserve the same height for all list items and push to the bottom the last div. How would I do this using 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>

a 代码所有我正在尝试的

and here is a codepen all what I was trying

推荐答案

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>

/ p>

References:

1. 带Flexbox的等高列


2. 对齐Flex项目的方法

1. Equal Height Columns with Flexbox
2. Methods for Aligning Flex Items

这篇关于等高高度列，并将最后一个项目对齐到底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！