-1

Preciso fazer um elemento que tenha dentro dele vários cartões(outros elementos) e eu preciso que eles ocupem todo o espaço disponível e caso ultrapasse esse espaço ele deve quebrar a linha. Algumas observações:

Imagem do problema

Esse é o resultado que eu preciso ter, os cards(em cinza) tem um tamanho fixo(isso infelizmente não pode mudar no projeto) e precisam estar alinhados ao header a cima, para chegar nesse resultado eu utilizei o seguinte código:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  margin: 0 auto;
}

.main {
  width: 80%;
  height: 100vh;
  margin: 0 auto;
  
  
}

header {
  width: calc(100% - 0.5rem);
  height: 3rem;
  background-color: blue;
  margin-bottom: 1rem;
  
}

.content {
  display: flex;
  flex-flow: row wrap;
  align-content: space-between;
  justify-content: space-between;
}

.card {
  height: 3rem;
  width: 8rem;
  margin: 0.5rem 0.5rem 0 0;
  background-color: gray;
}
<body>
  <div class="main">
    <header>Header </header>
    <div class="content">
      <div class="card"></div> 
      <div class="card"></div> 
      <div class="card"></div> 
      <div class="card"></div> 
      <div class="card"></div> 
      <div class="card"></div> 
      <div class="card"></div> 
      <div class="card"></div> 
      <div class="card"></div> 
      <div class="card"></div> 
      <div class="card"></div> 
      <div class="card"></div> 
    </div>
  </div>
  
</body>

Qual o problema dele então? problema

Quando existem poucos cards o justify-content: space-between; faz com que ele fique com esses espaçamentos entre eles. Existe algum modo de deixar os cards responsivos e alinhados e caso tenham poucos cards eles fiquem alinhados no começo?

Ideal

Essa seria a situação ideal removendo o justify-content: space-between; mas sem o justify-content: space-between; quando o card não cabe mais no elemento ele faz essa quebra:

inserir a descrição da imagem aqui

Existe alguma solução?

0

2 Respostas 2

1

Uma sugestão seria usar o sistema de grid do CSS, pois acho que com flexbox você não irá conseguir fazer isso.

Irá ficar assim:

inserir a descrição da imagem aqui

Aí é só definir breakpoints através de @media rules para reduzir o número de cards por linha.

As classes .conteudo e .card teriam basicamente a estrutura:

.content {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px; /* espaço entre os cards */
}

.card {
    background-color: gray;
}

No exemplo acima, serão exibidos 5 cards por linha (o número 5 na função repeat).

E um exemplo de uma @media rule onde seriam exibidos 4 cards por linha se a largura do viewport for de até 1280 pixels:

@media screen and (max-width: 1280px){
    .content {
        grid-template-columns: repeat(4, 1fr);
    }
}

Aí é só criar regras como desejar.

Veja funcionando:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  margin: 0 auto;
}

.main {
  width: 80%;
  height: 100vh;
  margin: 0 auto;
  
  
}

header {
  height: 3rem;
  background-color: blue;
  margin-bottom: 1rem;
  
}

.content {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
  gap: 10px; /* espaço entre os cards */
}

.card {
    background-color: gray;
}


@media screen and (max-width: 1280px){
    .content {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media screen and (max-width: 1024px){
    .content {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media screen and (max-width: 768px){
    .content {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 428px){
    .content {
        grid-template-columns: repeat(1, 1fr);
    }
}
<div class="main">
 <header>Header </header>
 <div class="content">
   <div class="card">1</div> 
   <div class="card">2</div> 
   <div class="card">3</div> 
   <div class="card">4</div> 
   <div class="card">5</div> 
   <div class="card">6</div> 
   <div class="card">7</div> 
   <div class="card">8</div> 
   <div class="card">9</div> 
   <div class="card">10</div> 
   <div class="card">11</div> 
   <div class="card">12</div> 
   <div class="card">13</div> 
   <div class="card">14</div> 
 </div>
</div>

Repare também que no header não foi preciso fazer aquela gambi que tinha no width, podendo ser omitido pois o header já é 100% de padrão, pois é um elemento de bloco:

inserir a descrição da imagem aqui

6
  • 1
    Em grid-template-columns: repeat(), as opções auto-fill e auto-fit dispensam o uso de media queries, v.g. grid-template-columns: repeat(auto-fill, 8rem);. 10/09/2021 às 6:01
  • Olá @VanderSantos. Testei com os valores que vc sugeriu e não tive o resultado desejado. Fica um espaço sobrando na direita.
    – Sam
    10/09/2021 às 14:16
  • Sam, se você se refere ao espaço que fica quando há somente uma coluna, esse era o comportamento esperado considerando o space-between e o tamanho fixo dos cards - de todo o modo, nesse cenário, independente do valor de justify-content, ficaria sobrando espaço de algum lado. Por outro lado, com mais de uma coluna, não é normal que sobre espaço. Nesse sentido, confira: vanderms.github.io/frontend-how-to/grid-auto-fill/index.html 10/09/2021 às 16:55
  • Interessante, mas fica ruim o alinhamento com tamanho fixo dos cards e o space-between, pq o espaço entre eles, em momentos, fica enorme, além do espaço sobrando quando fica apenas 1 coluna. Outro problema que vi foi o margin-right que vc usou, isso faz com que a margem dos cards mais à direita ultrapassem a área da div .content. Mas valeu pelo aprendizado.
    – Sam
    10/09/2021 às 17:35
  • 1
    Pessoal eu consegui resolver com o grid-template-columns: repeat(auto-fit, minmax(11rem, 2fr)); 11/09/2021 às 14:08
0

Eu concordo com o @sam, ou seja, que o grid display é a melhor opção para fazer aquilo que pretende. Porém, se quiser mesmo utilizar flex display, existe um workaround que, basicamente, consiste em adicionar elementos apenas para efeitos de "enchimento" que depois torná-los invisíveis com css.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  margin: 0 auto;
}

.main {
  width: 80%;
  height: 100vh;
  margin: 0 auto;
  
  
}

header {
  width: calc(100% - 0.5rem);
  height: 3rem;
  background-color: blue;
  margin-bottom: 1rem;
  
}

.content {
  display: flex;
  flex-flow: row wrap;
  align-content: space-between;
  justify-content: space-between;
}

.card {
  height: 3rem;
  width: 8rem;
  margin: 0.5rem 0.5rem 0 0;
  background-color: gray;
}

.card--dummy {
  visibility: hidden;
  height: 0;
}
<body>
  <div class="main">
    <header>Header </header>
    <div class="content">
      <div class="card"></div> 
      <div class="card"></div> 
      <div class="card"></div> 
      <div class="card"></div> 
      <div class="card"></div> 
      <div class="card"></div> 
      <div class="card"></div> 
      <div class="card"></div> 
      <div class="card"></div> 
      <div class="card"></div> 
      <div class="card"></div> 
      <div class="card card--dummy"></div>
      <div class="card card--dummy"></div>
      <div class="card card--dummy"></div>
      <div class="card card--dummy"></div>
      <div class="card card--dummy"></div>
      <div class="card card--dummy"></div>
      <div class="card card--dummy"></div>
      <div class="card card--dummy"></div>
      <div class="card card--dummy"></div>
    </div>
  </div>
  
</body>

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 .