显示网格：7 项，3 列，最后居中

Question

我有 7 个项目（将来可能会有 8 个或 9 个或更多）排列在 3 个垂直列中。

我希望当有 7 个时，最后一个居中对齐。 警告：我希望有一个滞后，就像我的例子一样。

如果有8个，让它填满最后两列中的一列。 9，所有的列都被填满了。怎么做？

HTML :

<article class="wCard" v-for="card in workshops" :key="card._id">
        <div class="wCard__content">
          <img class="wCard__icon" :src="$urlFor(card.icon.asset.url)" />
           ………
        </div>
          
</article>

Answer 1

你可以使用 CSS Flexbox。 flexbox 布局是一种在两个轴（垂直和水平）上对齐项目的方法。它背后的主要思想是让容器能够改变其项目的宽度、高度和顺序以最好地填充可用空间。 HTML:

<div class="container">
    <article class="wCard" v-for="card in workshops" :key="card._id">
        <div class="wCard__content">
            <img class="wCard__icon" :src="$urlFor(card.icon.asset.url)" />
            ………
        </div>
    </article>
</div>

CSS：

.container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-content: space-around;
}

.wCard {
    flex: 1 0 30%; /* The browser controls the width of the boxes (30% here) and they can grow and shrink */
    margin: 1em;   /* Add some margin around the cards */
}

.wCard__content {
    /* Style your content here */
}

记得调整 flex-basis 的值（这里设置为 30%），以在每行项目和可用空间之间取得适当的平衡。这个百分比代表弹性项目的初始主要大小，在根据弹性因子分配可用空间之前。

另外，请注意 flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写。这里，flex: 1 0 30% 表示 flex-grow: 1, flex-shrink: 0, flex-basis: 30%.

如果您希望最后一个项目（当有 7、8 或 9 时）在新行上单独居中，您可以添加 margin: auto 使项目在主轴上居中：

.wCard:last-child {
    margin: auto;
}