Flexbox - 所有卡的高度相同

Question

我有一个装有 3 张卡片的弹性盒容器，我正在尝试弄清楚如何使卡片具有相同的高度，但我没有取得太大成功（尝试改变方向，flex-direction: column;但没有成功）。

这需要对 IE11 友好。希望我目前所拥有的一切都是正确的（CSS 世界里的新手）。

代码笔： 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

Flex 容器的初始设置是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>

修改后的代码笔

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