时间戳

首页 > 解决方案 > Flexbox：等高行？

css - Flexbox：等高行？

问题描述

我有两个并排的盒子，其中包含一个标题、一个图像、一行元信息和一个简短的段落。图像和附加信息的大小始终相同，但标题和段落的长度可能会有很大差异。大致结构：

.container {
  display: flex;
  align-items: stretch;
}

.col-md-6 {
  display: flex;
  flex-direction: column;
}

.title {
  display: flex;
  flex: 1 0 auto;
}
<div class="container">
  <div class="row">
    <div class="col-md-6">
      <div class="title">
        <h2>Any length of title...</h2>
      </div>
      <div class="img">
        <img src="#">
      </div>
      <div class="meta">
        <p>Same info here</p>
      </div>
      <div class="content">
        <p>Lorem ipsum et cetera...</p>
      </div>
    </div>
  </div>
</div>

我已经尝试了各种不同的 CSS，我几乎可以在一个实例（https://codepen.io/nickfindley/pen/WPxWNJ）中使用它，而在另一个实例中完全没有（https://codepen.io/ nickfindley/pen/GzbbOQ）。我认为 flexbox 是答案，但我认为我不明白flex-grow, flex-shrink, 或flex-basis不足以使其工作。我是在吠叫正确的树还是需要不同的解决方案？

标签： cssflexbox

解决方案

尝试这个：

.flex-container {
display: flex;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;

flex-direction: row;
-webkit-flex-flow: row;
justify-content: space-evenly;

padding: 0;
margin: 0;
list-style: none;
position: relative;
text-align: center;

.row {
position: relative;
}

对两个框都执行此操作，并使用（.row 类的）边距和填充以使其正确。我之前做过类似的事情，这应该可以。

推荐阅读