如何使引导卡具有相同的高度 CSS Tricks

如果您使用过Bootstrap或其他任何UI框架，那么您必须遇到过这个问题 - 次要含义不齐的引导卡。这可以是一个烦恼，但是它很容易通过使用flexbox来解决。

在这个技巧中，我将向您展示如何使用flexbox使Bootstrap引导卡的高度相等。

Step 1: 为每个引导卡添加一个.flex类

为了使引导卡具有相同的高度，我们需要将它们的容器（即具有class =“card-deck”）从默认的CSS“浮动”位置更改为flexbox位置。 为此，请为每个包含引导卡的div添加一个名为“flex”的新类。

<div class="card-deck flex">
  <div class="card">
    <!-- ... card content ... -->
  </div>
  <div class="card">
    <!-- ... card content ... -->
  </div>
  <div class="card">
    <!-- ... card content ... -->
  </div>
</div>

请注意，这将添加一个具有默认值“ row”的新flex容器。当然，我们可以通过添加一个名为“.flex-column”的类来更改此行为。但是，由于Bootstrap提供支持“ card-deck”的特殊轮廓，因此我们必须使用默认行为。

Step 2: 将.card从float更改为flex子项

我们已经将包含引导卡的div转换为flex容器，现在我们需要将引导卡本身从浮动元素更改为flex子项。我们可以通过添加一个名为“.d-flex”的类来做到这一点，它将在内部使用一个flex容器。

<div class="card-deck flex">
  <div class="card d-flex">
    <!-- ... card content ... -->
  </div>
  <div class="card d-flex">
    <!-- ... card content ... -->
  </div>
  <div class="card d-flex">
    <!-- ... card content ... -->
  </div>
</div>

Step 3: 在.card上使用flex-grow属性

最后，我们需要告诉浏览器让每个引导卡都填充父容器的可用空间。 为此，请将所有引导卡上的“ flex-grow”属性设置为“ 1”。

.card {
  flex-grow: 1;
}

这将通知flexbox让每个引导卡都占用父容器的相同空间。

现在，所有引导卡都具有相同的高度，而不管其内部内容的大小。 请注意，在更改引导卡的高度方面，这是一种更加灵活的解决方案，因为它适用于引导卡的内容可以是任何大小的情况。

完整代码

<div class="card-deck flex">
  <div class="card d-flex">
    <!-- ... card content ... -->
  </div>
  <div class="card d-flex">
    <!-- ... card content ... -->
  </div>
  <div class="card d-flex">
    <!-- ... card content ... -->
  </div>
</div>

<style>
.card {
  flex-grow: 1;
}
</style>

结论

通过将每个引导卡转换为灵活容器并将.flex-grow属性设置为“ 1”，我们可以轻松地使自己的引导卡的高度相同，而无需借助额外的JavaScript来实现。

虽然Bootstrap等UI框架通常为开发人员提供一个完整的解决方案，但是了解这些技术可以使我们更好地理解如何使CSS工作以及如何在解决实际问题时更好地使用现有工具。