I have designed a component that acts as a container for multiple items, using v-for to display four of these containers on my page. However, they are currently only shown in a single column layout and I need them to be displayed in two columns per row on desktop and in a single column on mobile devices. I already have a footer and background setup without using flexbox, so I want to make the necessary changes to the containers without affecting other components.
App.Vue code:
<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>
Component code:
<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>