flexbox中的等高内部子项[重复]答案

【问题标题】：Equal height inner child in flexbox [duplicate]flexbox中的等高内部子项[重复]
【发布时间】：2021-12-12 02:54:06
【问题描述】：

我正在尝试创建一个列布局，在每一列中都有一个标题、一段不等高的文本和一个按钮。我的目标是让所有元素从相同的高度开始。斗争是如何实现这一点，尤其是最后一个按钮。使用display: flex，我可以创建等高的列，但这不适用于内部元素。

我在这个 codepen 中创建了一个简单的结构：https://codepen.io/michaaeell/pen/gOxWWGZ。我的目标是让标题、文本和最后的句子开始相同，所以基本上响应式空格必须添加到最后一句上方的第 1 列和第 2 列，以确保它与第 3 列的最后一句高度相同。

我尝试使用 flex-grow、flex-flow、align-content 来实现它，但它们都会导致不正确的结果...非常感谢任何帮助！

.container {
  display: flex;
}

.column {
  flex: 1;
  border: 1px solid red;
}

<div class="container">
  <div class="column">
    <h2> Some title </h2>

    <p> "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam </p>

    <p> Final sentence </p>
  </div>

  <div class="column">
    <h2> Some title </h2>

    <p> "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam </p>

    <p> Final sentence </p>
  </div>

  <div class="column">
    <h2> Some title </h2>

    <p> "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
      et dolore magna aliqua. Ut enim ad minim veniam </p>

    <p> Final sentence </p>
  </div>
</div>

【问题讨论】：

这能回答你的问题吗？ Align child elements of different blocks

标签： html css flexbox

【解决方案1】：

您可以在flex 中使用flex。为了将标题和p 组合在一起，您可以添加一个额外的div.text。

.container {
  display: flex;
}

.column {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid red;
}

<div class="container">
  <div class="column">
    <div class="text">
        <h2> Some title </h2>
        
        <p> "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam </p>
    </div>
    <p> Final sentence </p>
  </div>
  
  <div class="column">
      <div class="text">
        <h2> Some title </h2>
        
        <p> "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam </p>
      </div>
    <p> Final sentence </p>
  </div>
  
  <div class="column">
    <div class="text">
        <h2> Some title </h2>
    
        <p> "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam </p>
    </div>
    <p> Final sentence </p>
  </div>
</div>

【讨论】：

【解决方案2】：

将.last类添加到最后一个p，然后将css更改为：

.container {
  display: flex;
}

.column {
    flex: 1;
    border: 1px solid red;
    display: flex;
    flex-direction: column;
}

.last {
  margin-top: auto;
}

如果您不想将类 .last 添加到最后一个 p 中，您可以使用选择器：

.column p:last-child

像这样：

.column p:last-child {
  margin-top: auto;
}

小提琴：https://jsfiddle.net/ezgy2s3f/1/

【讨论】：