使 flex div 的子级具有相同的高度（基于每个“行”）

Question

我有一个带有子 div 的 flex div (.parent)（你猜对了，.child），它包含更多的行。我的问题是我似乎无法让每个 div .card 的边框具有相同的高度而不破坏我的“网格”。当我尝试为.child 等指定特定高度时，高度看起来很糟糕，因为不是每一行都有相同长度的内容。我见过这样的例子，但不知道如何用 flex 解决它，以便多行具有相同的高度（没有每个“单元格”的高度相同并且产生尽可能多的混乱。

.parent {
  display: flex;
  flex-grow: 1;
  flex-wrap: wrap;
  margin: 0 auto;
  max-width: 100%;
  width: 100%;
}

.child {
  height: 100%;
  margin-top: 20px;
  margin: 1%;
  display: inline-flex;
}

.a-title {
  font-size: 1.3em;
  font-weight: 700;
  width: 100%;
}

.child .card {
  border-radius: 3px;
  border: 1px solid;
  font-size: .8em;
  padding: 10px;
  display: inline-block;
  overflow: hidden;
  /* height: 600px; */
}

<div class="parent">
  <div class="child">
    <div class="card">

      <img src="https://i.imgur.com/D1p6UX3.jpg" width="240" height="240"><br>
      <p class="a-title">
        Title
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        <a href="#">Some fake link</a>
      </p>
    </div>
  </div>
  <div class="child">
    <div class="card">

      <img src="https://i.imgur.com/D1p6UX3.jpg" width="240" height="240"><br>
      <p class="a-title">
        Title
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        <a href="#">Some fake link</a>
      </p>
    </div>
  </div>
  <div class="child">
    <div class="card">

      <img src="https://i.imgur.com/D1p6UX3.jpg" width="240" height="240"><br>
      <p class="a-title">
        Title
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        <a href="#">Some fake link</a>
      </p>
    </div>
  </div>
  <div class="child">
    <div class="card">

      <img src="https://i.imgur.com/D1p6UX3.jpg" width="240" height="240"><br>
      <p class="a-title">
        Title
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        <a href="#">Some fake link</a>
      </p>
    </div>
  </div>
  <div class="child">
    <div class="card">

      <img src="https://i.imgur.com/D1p6UX3.jpg" width="240" height="240"><br>
      <p class="a-title">
        Title
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        <a href="#">Some fake link</a>
      </p>
    </div>
  </div>
  <div class="child">
    <div class="card">

      <img src="https://i.imgur.com/D1p6UX3.jpg" width="240" height="240"><br>
      <p class="a-title">
        Title
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>

      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        <a href="#">Some fake link</a>
      </p>
    </div>
  </div>
  <div class="child">
    <div class="card">

      <img src="https://i.imgur.com/D1p6UX3.jpg" width="240" height="240"><br>
      <p class="a-title">
        Title
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        <a href="#">Some fake link</a>
      </p>
    </div>
  </div>
</div>

试图避免这里发生的事情（当前代码示例）：https://jsfiddle.net/4gy7fzw1/

没有设置高度的代码示例：https://jsfiddle.net/t2yzfkm9/

Answer 1

宽度和高度不适用于 flex，请使用“flex”属性来指定/设置元素的宽度。

我已经更新了您的“子”和“父”类的 CSS，以使所有卡片的高度相同。

.parent {
  display: flex;
  flex-grow: 1;
  flex-wrap: wrap;
 
}

.child {
  margin: 1%;
  display: flex;
  align-items: stretch;
}

.a-title {
  font-size: 1.3em;
  font-weight: 700;
  width: 100%;
}

.child .card {
  border-radius: 3px;
  border: 1px solid;
  font-size: .8em;
  padding: 10px;
  display: inline-block;
  overflow: hidden;
  /* height: 600px; */
}

<div class="parent">
  <div class="child">
    <div class="card">

      <img src="https://i.imgur.com/D1p6UX3.jpg" width="240" height="240"><br>
      <p class="a-title">
        Title
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        <a href="#">Some fake link</a>
      </p>
    </div>
  </div>
  <div class="child">
    <div class="card">

      <img src="https://i.imgur.com/D1p6UX3.jpg" width="240" height="240"><br>
      <p class="a-title">
        Title
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        <a href="#">Some fake link</a>
      </p>
    </div>
  </div>
  <div class="child">
    <div class="card">

      <img src="https://i.imgur.com/D1p6UX3.jpg" width="240" height="240"><br>
      <p class="a-title">
        Title
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        <a href="#">Some fake link</a>
      </p>
    </div>
  </div>
  <div class="child">
    <div class="card">

      <img src="https://i.imgur.com/D1p6UX3.jpg" width="240" height="240"><br>
      <p class="a-title">
        Title
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        <a href="#">Some fake link</a>
      </p>
    </div>
  </div>
  <div class="child">
    <div class="card">

      <img src="https://i.imgur.com/D1p6UX3.jpg" width="240" height="240"><br>
      <p class="a-title">
        Title
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        <a href="#">Some fake link</a>
      </p>
    </div>
  </div>
  <div class="child">
    <div class="card">

      <img src="https://i.imgur.com/D1p6UX3.jpg" width="240" height="240"><br>
      <p class="a-title">
        Title
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>

      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        <a href="#">Some fake link</a>
      </p>
    </div>
  </div>
  <div class="child">
    <div class="card">

      <img src="https://i.imgur.com/D1p6UX3.jpg" width="240" height="240"><br>
      <p class="a-title">
        Title
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        <a href="#">Some fake link</a>
      </p>
    </div>
  </div>
</div>

Answer 2

通常，要让 flexbox 布局中的每一列具有相同的高度，您需要做的就是在父元素 (.parent) 上指定 display: flex。在您的具体情况下，您将在子元素 (.child) 上设置 height: 100%。

在 flexbox 中，height: 100% 实际上与您所期望的相反，因为百分比驱动的值基于包含块的高度。 height: auto 将允许元素展开（并且是默认设置）。

简而言之，要让列的高度相同，只需从.child 中删除 height: 100%：

.parent {
  display: flex;
  flex-grow: 1;
  flex-wrap: wrap;
  margin: 0 auto;
  max-width: 100%;
  width: 100%;
}

.child {
  /*height: 100%;*/
  margin-top: 20px;
  margin: 1%;
  display: inline-flex;
}

.a-title {
  font-size: 1.3em;
  font-weight: 700;
  width: 100%;
}

.child .card {
  border-radius: 3px;
  border: 1px solid;
  font-size: .8em;
  padding: 10px;
  display: inline-block;
  overflow: hidden;
  /* height: 600px; */
}

<div class="parent">
  <div class="child">
    <div class="card">

      <img src="https://i.imgur.com/D1p6UX3.jpg" width="240" height="240"><br>
      <p class="a-title">
        Title
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        <a href="#">Some fake link</a>
      </p>
    </div>
  </div>
  <div class="child">
    <div class="card">

      <img src="https://i.imgur.com/D1p6UX3.jpg" width="240" height="240"><br>
      <p class="a-title">
        Title
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        <a href="#">Some fake link</a>
      </p>
    </div>
  </div>
  <div class="child">
    <div class="card">

      <img src="https://i.imgur.com/D1p6UX3.jpg" width="240" height="240"><br>
      <p class="a-title">
        Title
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        <a href="#">Some fake link</a>
      </p>
    </div>
  </div>
  <div class="child">
    <div class="card">

      <img src="https://i.imgur.com/D1p6UX3.jpg" width="240" height="240"><br>
      <p class="a-title">
        Title
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        <a href="#">Some fake link</a>
      </p>
    </div>
  </div>
  <div class="child">
    <div class="card">

      <img src="https://i.imgur.com/D1p6UX3.jpg" width="240" height="240"><br>
      <p class="a-title">
        Title
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        <a href="#">Some fake link</a>
      </p>
    </div>
  </div>
  <div class="child">
    <div class="card">

      <img src="https://i.imgur.com/D1p6UX3.jpg" width="240" height="240"><br>
      <p class="a-title">
        Title
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>

      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        <a href="#">Some fake link</a>
      </p>
    </div>
  </div>
  <div class="child">
    <div class="card">

      <img src="https://i.imgur.com/D1p6UX3.jpg" width="240" height="240"><br>
      <p class="a-title">
        Title
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        <a href="#">Some fake link</a>
      </p>
    </div>
  </div>
</div>