css - 如何在列方向上对所有 flex 元素平均拉伸(stretch)高度？

Question

我有 flex 元素 .item 和 flex-direction: column 我想要每个子元素 (.item__title, . item__description) 根据最高的一个来获取相等的垂直空间。所以下一项从同一个新行开始。我正在尝试以下代码:

<article class="items">
<section class="item">
    <h2 class="item__title">Lorem ipsum dolor sit amet</h2>
    <p class="item__description">Lorem ipsum dolor sit amet.</p>
    <a class="item__more-button">See more</a>
</section>
<section class="item">
    <h2 class="item__title">Lorem ipsum dolor sit amet</h2>
    <p class="item__description">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
        incididunt ut labore et dolore magna aliqua.</p>
    <a class="item__more-button">See more</a>
</section>
<section class="item">
    <h2 class="item__title">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
        incididunt</h2>
    <p class="item__description">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
        incididunt ut labore et dolore magna aliqua.</p>
    <a class="item__more-button">See more</a>
</section>
</article>


  .items {
  display: flex;
  }

  .item {
  margin: 0 15px;
  width: calc((100% - 2 * 15px) / 3);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  }



  .item__title {
      flex: 1;
  }

  .item__description {
      flex: 1;
  }

但我希望它看起来像这张图:

如何在不设置高度的情况下执行此操作？

Answer 1

只需添加 justify-content: space-between;到你的元素类别，您的部分已经具有相同的高度

  .items {
  display: flex;
  }

  .item {
  margin: 0 15px;
  width: calc((100% - 2 * 15px) / 3);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;

}
.item.__title{
flex:1;
}
.item.__description {
      flex: 1;
  }

<article class="items">
<section class="item">
    <h2 class="item__title">Lorem ipsum dolor sit amet</h2>
    <p class="item__description">Lorem ipsum dolor sit amet.</p>
    <a class="item__more-button">See more</a>
</section>
<section class="item">
    <h2 class="item__title">Lorem ipsum dolor sit amet</h2>
    <p class="item__description">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
        incididunt ut labore et dolore magna aliqua.</p>
    <a class="item__more-button">See more</a>
</section>
<section class="item">
    <h2 class="item__title">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
        incididunt</h2>
    <p class="item__description">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
        incididunt ut labore et dolore magna aliqua.</p>
    <a class="item__more-button">See more</a>
</section>
</article>