1

Estou tentado obter o seguinte resultado na minha página:

inserir a descrição da imagem aqui

Porém o resultado atual que estou obtendo é esse: inserir a descrição da imagem aqui

Agora, as informações:

  • Estou usando SkeletonJS e Vue
  • Os círculos vão ser dinâmicos, então se por exemplo, tiver 6 círculos, vai ficar 3 em cima e 3 em baixo
  • Tentei usar align: flex porém não funcionou

O código é esse:

<template>
    <div id="items" class="container">
        <div class="header">
            <div class="row">
                <h2>Quem você conheceu?</h2>
            </div>
        </div>
        <div class="body">
            <div class="row box">
                <div v-for="a in aux" :key="a" class="four columns">
                    <image-circle></image-circle>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import ImageCircle from '../components/ImageCircle';

export default {
    data: function() {
        return {
            aux: [1,2,3,4,5]
        }
    },
    components: {
        ImageCircle,
    }
}
</script>

<style>
.header {
    margin-top: 50px;
    text-align: center;
    color: #fff;
}

.box {
  display: flex;
  justify-content: center;
}

.body .column,.columns {
    margin-left: 0;
    padding: 10px;
    margin: 0 auto;
}

.body {
    margin-top: 10%;
    text-align: center;

}

html {
    height: 100vh;
    background-color: #bd4f6c;
    background-image: linear-gradient(326deg, #bd4f6c 0%, #d7816a 74%);
}
</style>

Componente ImageCircle:

<template>
    <div class="img-circle">

    </div>
</template>

<script>
export default {

}
</script>

<style>
.img-circle {
    width: 200px;
    height: 200px;
    background-color: #ccc;
    border-radius: 100%;
    margin: 0 auto;
}
</style>

Como posso fazer para obter o resultado esperado?

JS Fiddle: https://jsfiddle.net/y0Ldhjxo/13/

6
  • Usando display: flex; e justify-content: center; você vai conseguir fazer isso. Só que se o espaço couber vão ficar todos em linha.
    – GeekSilva
    Commented 12/03/2020 às 11:25
  • Talvez se você colocar um flex-basis: 33.33%; no .img-circle
    – GeekSilva
    Commented 12/03/2020 às 11:26
  • Coloquei mas não surtiu efeito Commented 12/03/2020 às 11:28
  • Tem como colocar no JS Fidle?
    – GeekSilva
    Commented 12/03/2020 às 11:37
  • jsfiddle.net/y0Ldhjxo/13 @GeekSilva Commented 12/03/2020 às 11:45

1 Resposta 1

3

No CSS você vai fazer o seguinte:

.header {
    margin-top: 50px;
    text-align: center;
    color: #fff;
}

.box {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
}

.body .column,.columns {
    margin-left: 0;
    padding: 10px;
    margin: 0 auto;
}

.body {
    margin-top: 10%;
    text-align: center;

}

html, body{
    height: 100vh;
    background-color: #bd4f6c;
    background-image: linear-gradient(326deg, #bd4f6c 0%, #d7816a 74%);
}

.box-image {
  flex: 0 0 33.333333%;
  display: flex;
  justify-content: center;
}

.img-circle {
    width: 100px;
    height: 100px;
    background-color: #ccc;
    border-radius: 100%;
}

Aquele .box-image ali é uma classe que adicionei no teu HTML. Que ficou assim:

<div id="app">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css">
  <div id="items" class="container">
        <div class="header">
            <div class="row">
                <h2>Quem você conheceu?</h2>
            </div>
        </div>
        <div class="body">
            <div class="row box">
                <div v-for="img in images" :key="img" class="box-image">
                    <div class="img-circle"></div>
                </div>
            </div>
        </div>
   </div>
</div>

inserir a descrição da imagem aqui

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .