等高列高度 CSS FlexBox

Question

我正在努力实现等高列/卡在一些弹性项目上。

当。。。的时候标题或卡产品标题元素不超过 1 行
设计应有的表现
工作示例：

但当标题中断到第二行时，设计中断。

破碎的例子

<div class="card">
  <div class="title">iPhone 14 White Pearl</div>
  <div class="img">&nbsp;</div>
  <div class="desc">Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
  <button>Add to Cart</button>
</div>

<div class="card">
  <div class="title">iPhone 14 White Pearl</div>
  <div class="img">&nbsp;</div>
  <div class="desc">Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
  <button>Add to Cart</button>
</div>

<div class="card">
  <div class="title">iPhone 14 White Pearl (Unlocked - GSM)</div>
  <div class="img">&nbsp;</div>
  <div class="desc">Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
  <button>Add to Cart</button>
</div>

<div class="card">
  <div class="title">iPhone 14 White Pearl</div>
  <div class="img">&nbsp;</div>
  <div class="desc">Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
  <button>Add to Cart</button>
</div>

<div class="card">
  <div class="title">iPhone 14 White Pearl</div>
  <div class="img">&nbsp;</div>
  <div class="desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur Lorem ipsum dolor sit amet consectetur </div>
  <button>Add to Cart</button>
</div>

<div class="card">
  <div class="title">iPhone 14 White Pearl</div>
  <div class="img">&nbsp;</div>
  <div class="desc">Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
  <button>Add to Cart</button>
</div>

CSS

.container {
  display: grid;
  margin: 30px auto 10px;
  max-width: 1024px; 
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 30px;
}

.card {
  width: 200px;
  display: flex;
  flex-direction: column;
  flex-basis: 1;
  align-items: stretch;
}

.card .title {
  padding: 0 0 10px;
  font-family: 'Avenir Next', sans-serif;
  font-size: 15px;
  /* flex: 1 0 auto; */

}

.card .img {
  width: 100%;
  height: 120px;
  background-color: purple;
}

.card .desc {
  justify-self: flex-start;
  flex: 2 0 auto;
  padding: 10px 0;
}


.card button {
  padding: 10px;
  outline: none;
  border: none;
  color: white;
  background-color: teal;
}

@media screen and (max-width: 768px) {
  .container {
    grid-template-columns: 1fr 1fr;
  }
}

Code Link

好像有两个 flex-grow；弹性项目列容器内的属性不会产生我认为会产生的行为。

编辑：在我写这篇文章时，我意识到高度实际上是相等的。当卡片标题进入第二行时，没有发生的是其他同级容器之间的均匀分布和齐平对齐——这才是我真正想要的。任何帮助表示赞赏

Answer 1

根据您的需要添加高度检查值并添加确切的值。

.card .title {
  padding: 0 0 10px;
  height: 9%;
  font-family: 'Avenir Next', sans-serif;
  font-size: 15px;
  /* flex: 1 0 auto; */

}

.card .img {
  width: 100%;
  height: 125px;
  background-color: purple;
}

.card .desc {
  justify-self: flex-start;
  flex: 2 0 auto;
  padding: 10px 0;
  height:10%;
}

Answer 2

正如您所提到的，所有卡片的高度都相等，因此部分问题得到解决。 您想要的第二个任务是使所有标题的大小相同。我不确定是否可以在没有 JavaScript 的情况下进行动态调整，因此我提供了一个可以解决您的问题的解决方案。将此添加到您的小提琴的 JS 中：

// Get all title elements
const allTitles = document.querySelectorAll('.container .card .title');

// Prepare an empty array to store all title heights
const titleHeightArray = [];

// Get the height of each title
allTitles.forEach((titleElement) => {
    titleHeightArray.push(titleElement.offsetHeight);
});

// Get the maximum height of all titles
const titleHeightMax = Math.max(...titleHeightArray);

// Set the maximum height to all titles
allTitles.forEach((titleElement) => {
    titleElement.style.height = titleHeightMax + 'px';
});

最后，这真的取决于你在哪里应用它。如果它在一个管理员可以将标题编辑为 5 行的站点上，那仍然会被认为是损坏的，即使它们都是相同的高度。 更好的做法是定义高度并处理溢出文本，例如使用溢出和省略号（它在溢出标题的末尾添加 ...）。您可以参考以下资源以获取更多信息：https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow

Answer 3

您不需要使用 js 或设置硬高度来产生这种效果。

您可以通过两种主要方式获得它：

1. 使用网格模板行：minmax()
2. 设置卡片的最小高度

   here 就是一个例子。对不起，尾风播放，智能更方便。