html - 使用 flexboxes 在正确的地方创建盒子

Question

我正在尝试实现以下设计：

有人建议我为此使用 Flexbox。我尝试了一些方法，但我似乎无法理解如何保持相同大小的盒子。我有一个data包含所有需要数据的字段：

[
  {
    "name": "action",
    "img": "action.jpg",
    "status": "NO"
  }
  {
    "name": "Aldi",
    "img": "aldi.jpg",
    "status": "YES"
  }
]

但我真的很纠结 CSS 部分。我似乎无法理解如何将盒子分开。我创建了将保持灰色背景的主 div。然后我尝试遍历数据并为每个数据创建一个弹性框，但它没有正确创建这些框。我觉得我处理这个问题是错误的。是否可以展示如何为每个数据元素创建这些框？请不要展示如何创建按钮，我会尝试自己，我只是与那些块的主体斗争。

标签： htmlcssvue.jsvuejs2

Answer 1

在我看来你有这样的东西。请注意，您需要flex在不同的屏幕尺寸上调整属性。Bootstrap row，columns如果您在项目中使用它可以提供帮助。

.wrapper {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  padding-left: 0;
  background: rgba(0, 0, 0, 0.1);
}

.item {
  flex: 0 0 25%;
  list-style: none;
}

.item > div {
  height: 120px;
  margin: 1rem; 
  background: rgba(250, 250, 250, 1);
}

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