2

Como posso alinhar as div's de forma que a parte branca fique preenchida com os elementos abaixo dela (5,6,7)?

main {
    width: 200px;
    display: flex;
    flex-wrap: wrap;

    text-align: center;
    line-height: 50px;  
    font-size: 15px;
    font-weight: bold;
    color: #fff;

}

div {
    width: 50px;
    height: 50px;
    background-color: #581b98;
}

div:first-child {
    height: 100px;
    background-color: #ff304f;
}

div:last-child{
    background-color: #faee1c;
}

/*Flecha para exemplo*/
#teste{
  position: absolute;
  transform: rotate(300deg) translate(100px, 30px);
  clip-path: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%,     60% 80%, 0% 80%);
  background: red;
}
<main>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div></div>
</main>

<div id="teste"></div>

3
  • Talvez, se vc usar display grid e dense, vc consiga o resultado que deseja
    – hugocsl
    26/04/2020 às 14:26
  • O que você está tentando fazer chamasse masonry layout, pra alcançar o resultado que você espera apenas com CSS usando flexbox, vc teria que mudar o fluxo de row pra column, sem variar a largura dos itens ... ou como o @hugocsl falou, usar da técnica de grid. Aqui está o link pra um ótimo artigo pra você entender melhor como funciona w3bits.com/css-masonry 1/05/2020 às 21:41
  • Use Grid Area. Veja esse Vídeo a partir do 02:05:18 Se eu explicasse talvez você não entenderia, mas no vídeo você vai entender a lógica
    – Cauã
    17/08/2020 às 13:48

1 Resposta 1

0

Verifique se é isso que vc queria! Não deu pra entender direito..mas fiz para preencher o espaço em branco!

Segue o código:

main {
  width: 200px;
  display: flex;
  flex-wrap: wrap;
}

div {
  width: 50px;
  height: 50px;
  background-color: #581b98;
}

div:nth-of-type(5) {
  height: 50px;
  background-color: #ff304f;
}

div:nth-of-type(1) {
  height: 50px;
  background-color: #ff304f;
}

div:last-child {
  height: 50px;
  background-color: #faee1c;
}

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 .