使用 Flexbox 无法实现自动等高

Question

我创建了一个三列布局，但尽管在容器上使用了display: flex，但子项不会自动获得相同的高度。我不是 Flexbox 专家，所以我很难找出问题所在。

这是我的代码：

.events-row {
  display: flex;
}
.events-row .event-card:hover {
  margin-top: -5px;
}
.events-row .event-card .event-card-img {
  position: relative;
}
.events-row .event-card .event-card-img:hover {
  opacity: 0.5;
}
.events-row .event-card .event-card-img img {
  display: block;
  width: 100%;
}
.events-row .event-card .event-card-img .series-caption {
  position: absolute;
  top: 0;
  left: 0;
  padding: 5px 10px;
  font-size: 1.5em;
  color: #fff;
  background: #666;
}
.events-row .event-card .event-card-info {
  padding: 15px;
  text-align: left;
  color: #666;
  background: #eaeaea;
}
.events-row .event-card .event-card-info h1 {
  font-size: 2.5em;
  color: #000;
}
.events-row .event-card .event-card-info h2 {
  font-size: 2em;
  line-height: 1.5;
}
.events-row .event-card .event-card-info p {
  padding: 15px 0;
  font-size: 1.75em;
}
.events-row .event-card .event-card-info p a {
  font-size: 1.1em;
}
.events-row .event-card .event-card-info .button-cont {
  text-align: center;
}
.events-row .event-card .event-card-info .button-cont .button {
  display: inline-block;
  margin: 30px;
  padding: 10px 30px;
  font-size: 1.8em;
}

<div class="events-row">
  <div class="event-card">
    <div class="event-card-img">
      <a href="#">
        <img src="http://placeholdit.imgix.net/~text?txtsize=36&txt=Event%20Photo&w=382&h=275" />
      </a>
    </div>
    <div class="event-card-info">
      <h1>Event title</h1>
      <h2>Event date</h2>
      <h2>Event venue</h2>
      <p>
        Cu cum quem eros periculis, volutpat tractatos accommodare eu has, ex singulis assueverit usu.
        <a href="#">Learn More <span class="chevron right"></span></a>
      </p>
      <div class="button-cont">
        <a class="button blue-button" href="#">Buy Tickets</a>
      </div>
    </div>
  </div>
  <div class="event-card">
    <div class="event-card-img">
      <a href="#">
        <img src="http://placeholdit.imgix.net/~text?txtsize=36&txt=Event%20Photo&w=382&h=275" />
      </a>
      <div class="series-caption">Series title</div>
    </div>
    <div class="event-card-info">
      <h1>Event title</h1>
      <h2>Event date</h2>
      <h2>Event venue</h2>
      <p>
        Cu cum quem eros periculis, volutpat tractatos accommodare eu has, ex singulis assueverit usu.
        <a href="#">Learn More <span class="chevron right"></span></a>
      </p>
    </div>
  </div>
  <div class="event-card">
    <div class="event-card-img">
      <a href="#">
        <img src="http://placeholdit.imgix.net/~text?txtsize=36&txt=Event%20Photo&w=382&h=275" />
      </a>
      <div class="series-caption">Series title</div>
    </div>
    <div class="event-card-info">
      <h1>Event title</h1>
      <h2>Event date</h2>
      <h2>Event venue</h2>
      <p>
        Cu cum quem eros periculis, volutpat tractatos accommodare eu has, ex singulis assueverit usu.
        <a href="#">Learn More <span class="chevron right"></span></a>
      </p>
    </div>
  </div>
</div>

演示：http://codepen.io/ourcore/pen/gLKeLV.

Answer 1

它们的高度相同。添加边框时：

border: 1px solid #ccc;

它们看起来一样高。只是需要给父级添加背景，也就是.event-card。

将背景添加到.event-card 的替代解决方案：

.events-row .event-card {
  background: #eaeaea;
}

.events-row {
  display: flex;
}
.events-row .event-card {
  border: 1px solid #ccc;
  background: #eaeaea;
}
.events-row .event-card:hover {
  margin-top: -5px;
}
.events-row .event-card .event-card-img {
  position: relative;
}
.events-row .event-card .event-card-img:hover {
  opacity: 0.5;
}
.events-row .event-card .event-card-img img {
  display: block;
  width: 100%;
}
.events-row .event-card .event-card-img .series-caption {
  position: absolute;
  top: 0;
  left: 0;
  padding: 5px 10px;
  font-size: 1.5em;
  color: #fff;
  background: #666;
}
.events-row .event-card .event-card-info {
  padding: 15px;
  text-align: left;
  color: #666;
  background: #eaeaea;
}
.events-row .event-card .event-card-info h1 {
  font-size: 2.5em;
  color: #000;
}
.events-row .event-card .event-card-info h2 {
  font-size: 2em;
  line-height: 1.5;
}
.events-row .event-card .event-card-info p {
  padding: 15px 0;
  font-size: 1.75em;
}
.events-row .event-card .event-card-info p a {
  font-size: 1.1em;
}
.events-row .event-card .event-card-info .button-cont {
  text-align: center;
}
.events-row .event-card .event-card-info .button-cont .button {
  display: inline-block;
  margin: 30px;
  padding: 10px 30px;
  font-size: 1.8em;
}

<div class="events-row">
  <div class="event-card">
    <div class="event-card-img">
      <a href="#">
        <img src="http://placeholdit.imgix.net/~text?txtsize=36&txt=Event%20Photo&w=382&h=275" />
      </a>
    </div>
    <div class="event-card-info">
      <h1>Event title</h1>
      <h2>Event date</h2>
      <h2>Event venue</h2>
      <p>
        Cu cum quem eros periculis, volutpat tractatos accommodare eu has, ex singulis assueverit usu.
        <a href="#">Learn More <span class="chevron right"></span></a>
      </p>
      <div class="button-cont">
        <a class="button blue-button" href="#">Buy Tickets</a>
      </div>
    </div>
  </div>
  <div class="event-card">
    <div class="event-card-img">
      <a href="#">
        <img src="http://placeholdit.imgix.net/~text?txtsize=36&txt=Event%20Photo&w=382&h=275" />
      </a>
      <div class="series-caption">Series title</div>
    </div>
    <div class="event-card-info">
      <h1>Event title</h1>
      <h2>Event date</h2>
      <h2>Event venue</h2>
      <p>
        Cu cum quem eros periculis, volutpat tractatos accommodare eu has, ex singulis assueverit usu.
        <a href="#">Learn More <span class="chevron right"></span></a>
      </p>
    </div>
  </div>
  <div class="event-card">
    <div class="event-card-img">
      <a href="#">
        <img src="http://placeholdit.imgix.net/~text?txtsize=36&txt=Event%20Photo&w=382&h=275" />
      </a>
      <div class="series-caption">Series title</div>
    </div>
    <div class="event-card-info">
      <h1>Event title</h1>
      <h2>Event date</h2>
      <h2>Event venue</h2>
      <p>
        Cu cum quem eros periculis, volutpat tractatos accommodare eu has, ex singulis assueverit usu.
        <a href="#">Learn More <span class="chevron right"></span></a>
      </p>
    </div>
  </div>
</div>

注意：使用全屏并检查。

CodePen：http://codepen.io/anon/pen/JbZLya

Answer 2

将background-color 给.event-card，比如：

.event-card {
  background: #eaeaea;
}

看看下面更新的Codepensn-p（使用全屏）：

.events-row {
  display: flex;
}
.events-row .event-card {
  background: #eaeaea;
}
.events-row .event-card:hover {
  margin-top: -5px;
}
.events-row .event-card .event-card-img {
  position: relative;
}
.events-row .event-card .event-card-img:hover {
  opacity: 0.5;
}
.events-row .event-card .event-card-img img {
  display: block;
  width: 100%;
}
.events-row .event-card .event-card-img .series-caption {
  position: absolute;
  top: 0;
  left: 0;
  padding: 5px 10px;
  font-size: 1.5em;
  color: #fff;
  background: #666;
}
.events-row .event-card .event-card-info {
  padding: 15px;
  text-align: left;
  color: #666;
  background: #eaeaea;
}
.events-row .event-card .event-card-info h1 {
  font-size: 2.5em;
  color: #000;
}
.events-row .event-card .event-card-info h2 {
  font-size: 2em;
  line-height: 1.5;
}
.events-row .event-card .event-card-info p {
  padding: 15px 0;
  font-size: 1.75em;
}
.events-row .event-card .event-card-info p a {
  font-size: 1.1em;
}
.events-row .event-card .event-card-info .button-cont {
  text-align: center;
}
.events-row .event-card .event-card-info .button-cont .button {
  display: inline-block;
  margin: 30px;
  padding: 10px 30px;
  font-size: 1.8em;
}

<div class="events-row">
  <div class="event-card">
    <div class="event-card-img">
      <a href="#"><img src="http://placeholdit.imgix.net/~text?txtsize=36&txt=Event%20Photo&w=382&h=275" /></a>
    </div>
    <div class="event-card-info">
      <h1>Event title</h1>
      <h2>Event date</h2>
      <h2>Event venue</h2>
      <p>
        Cu cum quem eros periculis, volutpat tractatos accommodare eu has, ex singulis assueverit usu.
        <a href="#">Learn More <span class="chevron right"></span></a>
      </p>
      <div class="button-cont">
        <a class="button blue-button" href="#">Buy Tickets</a>
      </div>
    </div>
  </div>
  <div class="event-card">
    <div class="event-card-img">
      <a href="#"><img src="http://placeholdit.imgix.net/~text?txtsize=36&txt=Event%20Photo&w=382&h=275" /></a>
      <div class="series-caption">Series title</div>
    </div>
    <div class="event-card-info">
      <h1>Event title</h1>
      <h2>Event date</h2>
      <h2>Event venue</h2>
      <p>
        Cu cum quem eros periculis, volutpat tractatos accommodare eu has, ex singulis assueverit usu.
        <a href="#">Learn More <span class="chevron right"></span></a>
      </p>
    </div>
  </div>
  <div class="event-card">
    <div class="event-card-img">
      <a href="#"><img src="http://placeholdit.imgix.net/~text?txtsize=36&txt=Event%20Photo&w=382&h=275" /></a>
      <div class="series-caption">Series title</div>
    </div>
    <div class="event-card-info">
      <h1>Event title</h1>
      <h2>Event date</h2>
      <h2>Event venue</h2>
      <p>
        Cu cum quem eros periculis, volutpat tractatos accommodare eu has, ex singulis assueverit usu.
        <a href="#">Learn More <span class="chevron right"></span></a>
      </p>
    </div>
  </div>
</div>

希望这会有所帮助！

Answer 3

在修改代码时需要牢记两个概念：

• flex 等高列功能仅适用于兄弟姐妹
• flex布局的范围仅限于父子关系

您将*容器 (.events-row) 设为弹性容器。这意味着只有孩子 (.event-card) 接受 flex 属性（实际上，这些孩子是等高的兄弟姐妹）。

但您希望树下的后代共享相同的高度。除非你给它们的父容器display: flex 或display: inline-flex，或者可能使用height: 100%，否则它们的高度不会相等。

这里有更深入的解释：

• Equal Height Columns with Flexbox
• The scope of a flex formatting context
• Working with the CSS height property and percentage values