无法使用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;
}

查看下面的更新Codepen代码段（使用全屏）：

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

希望这有帮助！

Answer 3

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

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

您将顶级容器（.events-row）设为灵活容器。这意味着只有孩子（.event-card）接受灵活属性（事实上，这些孩子都是高等兄弟姐妹）。

但是你想让后代进一步沿着树下方分享相同的高度。除非您提供父容器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