html - Flexbox - 所有卡片的高度相同

Question

我有一个带有 3 张卡片的 flexbox 容器，我正在尝试弄清楚如何让这些卡片具有相同的高度，但我没有取得太大的成功(尝试改变方向 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>

revised codepen

已在 Chrome、Firefox、Edge 和 IE11 中测试。