我正在使用 flexbox 来创建我的布局，但是，我无法将元素正确定位在我的最后一行。我可以用网格重新创建相同的布局吗？

Question

我有一个宽度不固定的 flex 容器，里面有一堆固定宽度的 children。我已将 flex-wrap 设置为 wrap，将 justify-content 设置为 space-evenly。这对大多数部分来说都很好用，但是，最后一行元素的位置不是我想要的

我知道最后一行的元素是因为 justify-content: space-evenly。我想知道是否有可能在行已满时 space 内容均匀地保持最后一行的 children 在 div 的左侧。它应该看起来像这样：

遗憾的是，我读到最后一行的定位元素现在实际上无法使用 flexbox，我应该研究其他替代方案。这就是为什么我想知道是否可以在修复我遇到的最后一行问题的同时使用网格重新创建相同的布局

    .cards-list {
        padding-top: 20px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-evenly;
    }
    .card {
        width: 120px;
        height: 180px;
        background-color: red;
        margin-bottom: 10px;
    }

<div class='cards-list'>
   <div class='card'></div>
   <div class='card'></div>
   <div class='card'></div>
   <div class='card'></div>
   <div class='card'></div>
   <div class='card'></div>
   <div class='card'></div>
   <div class='card'></div>
</div>

Answer 1

当我需要 display: grid; 的回退时，我通常在使用 flex 进行网格布局时这样做。您可以添加与普通卡片相同 width/margin 的空网格填充物，并将高度设置为 0。公式是填充物比卡片行数少 1，所以 4 张卡片 > 3 个填充物，8 张卡片 > 7 个填料。希望清楚。

如果您不需要回退，您可以在我下面的示例中使用 class .grid。

编辑
当你使用 Vue 时，你可以这样做。请记住，最小宽度只是我采用的一个值，必须更改它才能代表您的断点。如果你喜欢，你甚至不需要那部分。这只是您的入门工具包，可以根据您的喜好和项目需要进行修改。

<template v-if="window.matchMedia('(min-width: 998px)').matches">
  <div v-for="i of 15" :key="`card-filler-grid-name-${i}`" class="card--filler" />
</template>

.cards-list {
  padding-top: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  max-width: 40rem;
  margin-bottom: 4rem;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  max-width: 40rem;
}

.card {
  width: 120px;
  height: 180px;
  background-color: red;
  margin-bottom: 10px;
}

.card--filler {
  width: 120px;
  height: 0;
}

<div class='cards-list'>
  <div class='card'></div>
  <div class='card'></div>
  <div class='card'></div>
  <div class='card'></div>
  <div class='card'></div>
  <div class='card'></div>
  <div class='card'></div>
  <div class='card'></div>
  <div class='card--filler'></div>
  <div class='card--filler'></div>
  <div class='card--filler'></div>
  <div class='card--filler'></div>
</div>

<div class='grid'>
  <div class='card'></div>
  <div class='card'></div>
  <div class='card'></div>
  <div class='card'></div>
  <div class='card'></div>
  <div class='card'></div>
  <div class='card'></div>
  <div class='card'></div>
  <div class='card'></div>
  <div class='card'></div>
  <div class='card'></div>
  <div class='card'></div>
</div>

Answer 2

我的解决办法是在每张卡片之间设置space的大小，卡片就会变得灵活。让我们这样做：

.wrapper{
  background-color: green;
  width: 100%;
  padding: 20px;
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
}

.item{
  width: calc(25% - 40px); /* 25% for 4 items, 33% for 3, 50% for 2 .... -> substract the right and left margin*/
  margin: 20px;
  background-color: yellow;
  height: 150px;
  box-sizing: border-box;
}

<div class="wrapper">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

这个解决方案非常简单但非常有效。希望对你有帮助！ Codepen 编辑代码：https://codepen.io/ZellRDesign/pen/YzXNdLr

注意：对于移动尺寸：记得添加带有 justify-content: center 的媒体查询；当只有一列卡片时

我正在使用 flexbox 来创建我的布局，但是，我无法将元素正确定位在我的最后一行。我可以用网格重新创建相同的布局吗？

I am using flexbox to create my layout, however, I can't properly position the elements on my last row. Can I recreate the same layout with grid?

html

css

grid-layout

flexbox