为什么我的 flexbox 没有与 v-for 连续？

Question

我创建了一个组件来作为其他项目的盒子，我正在使用 v-for 在我的页面中拥有四个这样的盒子。通过这种方式，它们只显示在一列中（我无法更改它），但对于台式机，我每行需要两个框，对于移动设备，我需要将它们显示在一列中。我已经有了页脚和背景，但它们没有使用 flexbox，所以我只想能够更改这些框而无需更改其他组件。

App.Vue 代码：

<template>
  <div id="app">
    <Background />
    <div v-for="cliente in clientes" :key="cliente.id">
      <Steps :cliente="cliente"/>
    </div>
    <Footer/>
  </div>
</template>

<script>
import Steps from './components/Steps.vue'
import Footer from './components/Footer2.vue'
import Background from './components/Background.vue'
export default {
  name: 'App',
  components: {
    Steps,
    Background,
    Footer
  },
  data(){
      return{
          clientes:[
        {
            id: 1,
            name:"Detalhes da Partida"
        },
        {
            id: 2,
            name:"Jogadores"
        },
        {
            id: 3,
            name:"Evidência da Partida"
        },
        {
            id: 4,
            name:"Mensagem: (opcional)"
        }

      ]
      }
  }
}
</script>

<style>
html, body {
    margin: 0;
    padding: 0;
    box-sizing: border-box; 
    background-color: #3B3B3B;
}

</style>

组件代码：

<template> 
    <section class="flex">
      <div>
        <p class="teste">{{cliente.id}}. {{cliente.name}}</p>
      </div>
  </section>
</template>

<script>
export default {
  name: 'Steps',
  props:{
      cliente: Object
  }
}
</script>

<style>
*{
    margin: 0;
    padding: 0;
}
.teste{
  color: #FFF;
  border-bottom: 1px solid #707070;
  padding: .5em .5em 0;
}
.flex {
  display: flex;
  flex-wrap: wrap;
  max-width: 32em;
  height: 30em;
  background-color: #232323;
  margin: 1em auto;

}
.flex > div {
  flex: 1 1 100px;
}
</style>

Answer 1

您在错误的容器上使用了flexbox。您需要在包装具有v-for 的元素的容器上添加类flexbox，以便v-for 生成的所有元素变为flex-items。

CODESANDBOX

App.vue

<section class="flex">
      <div v-for="cliente in this.clientes" :key="cliente.id">
        <Steps :cliente="cliente" />
      </div>
</section>

Steps.vue

<template>
  <div>
    <p class="teste">{{ cliente.id }}. {{ cliente.name }}</p>
  </div>
</template>

您需要添加一个媒体查询，以便在中型及以上设备中制作 2 列，在移动设备中制作单列

App.vue -> 风格

.flex {
  display: flex;
  flex-wrap: wrap;
  max-width: 32em;
  height: 30em;
  background-color: #232323;
  margin: 1em auto;
}
.flex > div {
  flex: 50%;
}

@media only screen and (max-width: 768px) {
  .flex > div {
    flex: 100%;
  }
}