Question

我有一张带有3张卡片的flexbox容器，我正在尝试找出如何使这些卡片达到相同的高度，但我没有取得多大成功（尝试改变方向flex-direction: column;并没有'工作）。

这需要IE11友好。希望我现在正沿着正确的方向前进（CSS世界中的新手）。

Codepen： https://codepen.io/neilem/pen/dejmRQ

#container {
  background-color: white;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: space-around;
  padding: 5% 5%;
}

.card {
  text-align: center;
  border: 1px solid black;
  width: 31.33333%;
  margin: 1%;
}

#container>.card>.card-image>img {
  display: block;
  width: 100%;
}

<section id="container">
  <div class="card">
    <div class="card-image">
      <img src="http://www.stevensegallery.com/600/400" />
    </div>
    <div class="card-content">
      <h3 class="card-title">Title 1</h3>
      <p>Lorem ipsum dolor sit amet, per wisi movet ludus ea, ne quo quot viderer. Ius ex laudem feugait tractatos, sit sale mollis ut. Per vocent laoreet democritum no, cu pri sumo omnesque. Et accommodare intellegebat qui. Vix ne mundi primis.</p>
    </div>
  </div>
  <div class="card">
    <div class="card-image">
      <img src="http://www.stevensegallery.com/600/400" />
    </div>
    <div class="card-content">
      <h3 class="card-title">Title 2</h3>
      <p>Lorem ipsum dolor sit amet, per wisi movet ludus ea, ne quo quot viderer. Ius ex laudem feugait tractatos</p>
    </div>
  </div>
  <div class="card">
    <div class="card-image">
      <img src="http://www.stevensegallery.com/600/400" />
    </div>
    <div class="card-content">
      <h3 class="card-title">Title 3</h3>
      <p>Lorem ipsum dolor sit amet, per wisi movet ludus ea</p>
    </div>
  </div>
</section>

Answer 1

弹性容器的初始设置为align-items: stretch。这就是创建相等高度列功能的原因。

在您的代码中，您使用align-items: flex-start覆盖该默认值。只是摆脱它。

#container {
  background-color: white;
  display: flex;
}

.card {
  flex: 1 0 30%;
  text-align: center;
  border: 1px solid black;
  margin: 1%;
}

#container > .card > .card-image > img {
  width: 100%;
}

<section id="container">
  <div class="card">
    <div class="card-image">
      <img src="http://www.stevensegallery.com/600/400" />
    </div>
    <div class="card-content">
      <h3 class="card-title">Title 1</h3>
      <p>Lorem ipsum dolor sit amet, per wisi movet ludus ea, ne quo quot viderer. Ius ex laudem feugait tractatos, sit sale mollis ut. Per vocent laoreet democritum no, cu pri sumo omnesque. Et accommodare intellegebat qui. Vix ne mundi primis.</p>
    </div>
  </div>
  <div class="card">
    <div class="card-image">
      <img src="http://www.stevensegallery.com/600/400" />
    </div>
    <div class="card-content">
      <h3 class="card-title">Title 2</h3>
      <p>Lorem ipsum dolor sit amet, per wisi movet ludus ea, ne quo quot viderer. Ius ex laudem feugait tractatos</p>
    </div>
  </div>
  <div class="card">
    <div class="card-image">
      <img src="http://www.stevensegallery.com/600/400" />
    </div>
    <div class="card-content">
      <h3 class="card-title">Title 3</h3>
      <p>Lorem ipsum dolor sit amet, per wisi movet ludus ea</p>
    </div>
  </div>
</section>

revised codepen

在Chrome，Firefox，Edge和IE11中进行了测试。

Answer 2

我不清楚你到底想要什么，但如果意图是让所有卡片的高度相同（全部），只需更换容器

align-items: flex-start;

到

align-items: stretch;

IE11在flexbox中存在大量漏洞，因此您可能希望验证内容中没有任何内容触发任何内容。

Flexbox - 所有卡上的高度相同

2 个答案: