html - 拉伸(stretch) flexbox child 以填充列高度

Question

我正在构建一个包含卡片的 flexbox 三列布局，所有卡片的高度都相同(检查 .card)，但在视觉上，它们是不是因为 .card-info 元素的高度不同并且有背景颜色。

我正在寻找一种方法来自动拉伸(stretch) .card-info 的高度，以填充 .card 中它下方的剩余空间。

如果有人提出建议，我无法在 .card 上设置背景颜色，因为我正在实现翻转动画，而卡片无法正确设置动画。

CSS:

.events-row {
  display: flex;
  justify-content: space-around;
}
.events-row .card {
  flex-basis: 31.3%;
  position: relative;
}
.events-row .card .card-info {
  padding: 15px;
  background-color: grey;
  text-align: left;
  font-size: 1rem;
  color: white;
}
.events-row .card .card-info .button-cont {
  text-align: center;
}
.events-row .card .card-info .button-cont .button {
  display: inline-block;
  margin: 30px;
  padding: 10px 30px;
  font-size: 1em;
}

结构:

<div id="events-cont">
  <div class="events-row">
    <div class="card">
      <div class="card-img four-three-img">
            <a href="#"><img src="http://placeholdit.imgix.net/~text?txtsize=44&txt=Event%20Photo&w=600&h=400" /></a>
          </div>
          <div class="card-info">
            <h2>Event title</h2>
            <h3>Event date</h3>
            <h3>Event venue</h3>
            <p>
              Cu cum quem eros periculis, volutpat tractatos accommodare eu has, ex singulis assueverit usu.
            </p>
      </div>
    </div>
  </div>
</div>

演示:http://codepen.io/ourcore/pen/xgLyMW

Answer 1

您只需在 CSS 中添加 3 行:

.card {
        flex-basis: 31.3%;
        position: relative;
        display: flex;
        flex-direction: column;


        .card-info {
            padding: 15px;
            background-color: grey;
            text-align: left;
            font-size: 1rem;
            color: white;
            flex-grow: 1;

将卡片本身设置为 flex，然后将它们设置为列，这样视觉上没有任何变化，但将信息部分的 flex-grow 设置为 1。