如何防止 Flexbox 项目集中在不完整的行上？

如何防止 Flexbox 项目居中于断线？

在 Flexbox 中，如果您有一个柔性容器，其中包含不适合的项目在其宽度内均匀地排成一行，该行上的其余项目居中。但是，如果您希望其余项目从左侧开始并具有相等的间距，就像整行上的项目一样，该怎么办？

解决方案：使用“幽灵”元素

无需使用 JavaScript，您可以创建空元素（称为“幽灵”元素）来填充不完整行上的剩余空间。

例如，如果容器的潜在列长度为 4，则您将需要 3幽灵元素。您可以将这些添加到 HTML 的末尾：

<div class="card"></div>
<div class="card"></div>
<div class="card"></div>

更新的 CSS：

.card:empty {
    width: 300px;
    box-shadow: none;
    margin: 2rem;
    padding-bottom: 0;
}

这可确保幽灵元素占据与

使用伪元素

您还可以利用CSS伪元素来减少所需的幽灵元素数量：

.card:empty::before {
    content: "";
    width: 300px;
    box-shadow: none;
    margin: 2rem;
}

这个为每张空卡创建一个伪元素，以占据不完整行上的位置。通过用 2 个伪元素替换 2 个 Ghost 元素，对于 4 的列长度，您只需要 1 个实际的 Ghost 元素。

示例代码：

<div class="container">
  <div class="recipe-grid">

    <div class="card">
      <!-- Card content -->
    </div>

    <div class="card">
      <!-- Card content -->
    </div>

    <div class="card">
      <!-- Card content -->
    </div>

    <div class="card">
      <!-- Card content -->
    </div>

    <div class="card"></div> <!--- Ghost element -->

  </div>
</div>

通过使用幽灵元素或伪元素，可以防止 Flexbox 项目以不完整的线条为中心，并确保排列更加美观。

以上是如何防止 Flexbox 项目集中在不完整的行上？的详细内容。更多信息请关注PHP中文网其他相关文章！