2

Quero criar um layout em que a primeira div utiliza 100% da largura de uma section e as outras divs utilizam 50%, criando um bloco.

inserir a descrição da imagem aqui

Porém, ao adicionar mais de 3 divs elas não se alinham como na primeira imagem mesmo usando a propriedade flex-wrap.

inserir a descrição da imagem aqui

Como faço para alinhar 2 elementos em cada linha após a primeira linha que possui width 100%?

inserir a descrição da imagem aqui

Código html :

<main>
 <section>    
  <div></div> 
  <div></div>                 
  <div></div> 
  <div></div>                  
 </section>   

 <aside> 
 </aside>

</main>

código css :

main section, main aside {
 flex: 1;
 border: 1px solid #000;
 display: flex;
 width: 512px;
 flex-direction: row;
 box-sizing: border-box;
 flex-wrap: wrap;
}

main section {
 background : green;
}

main aside {
 background : blue;
}

main section div {
 border: 1px solid #000;
 flex-grow: 1;
}

main section div:nth-child(1) {
 background: red;
 width: 100%;
}

main section div:nth-child(2) {
 background: yellow;

}

main section div:nth-child(3) {
 background: purple;
}

main section div:nth-child(4) {
 background: brown;

}

main section div:nth-child(5) {
 background: gray;
}

1 Resposta 1

1

Acredito que a melhor forma seria primeiro vc dividir em duas section e aside como vc fez. Depois na section que está a esquerda vc usa a propriedade flex-wrap e pronto vc terá o layout abaixo.

inserir a descrição da imagem aqui

O banner tem 100% da largura do pai, e 1,2,3,4, 50%

Segue o código da imagem acima

*:not(body):not(html) {
  box-sizing: border-box;
  border: 1px solid #000;
} 
main {
  display: flex;
  flex-wrap: wrap;
}
section {
  width: 50%;
  display: flex;
  flex-wrap: wrap;
}
div, aside {
  width: 50%;
}
.n1 {
  width: 100%;
}

  
<main>
  <section>
    <div class="n1">banner</div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
  </section>
  <aside>
    aside
  </aside>
  <div class="n1">uma div</div>
</main>

2
  • muito obrigado ! minimizou o código e ajudou muito.
    – Luis
    8/05/2019 às 17:28
  • @Luis fico feliz em ter ajudado, flex é muito bom, continue os estudos 💪 []´s
    – hugocsl
    8/05/2019 às 17:30

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 .