html - 使 flex div 的子元素具有相同的高度(以 -"row"为基础)

Question

我有一个 flex div (.parent) 和包含更多行的子 div(您猜对了，.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

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

在 flexbox 中，height: 100% 实际上与您预期的相反，因为百分比驱动的值是基于包含 block 的高度。 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>