使用 flexboxes 在正确的地方创建盒子答案

【问题标题】：Using flexboxes to create boxes in the right places使用 flexboxes 在正确的地方创建盒子
【发布时间】：2020-06-14 02:22:57
【问题描述】：

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

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

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

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

【问题讨论】：

尝试使用 vuejs 引导卡 - bootstrap-vue.js.org/docs/components/card
这应该是几行，到目前为止你尝试过什么？

标签： html css vue.js vuejs2

【解决方案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>

【讨论】：