0

Boa noite, pessoal. Estou há um bom tempo tomando uma surra do flexbox, pois não consigo "desalinhar" as minhas divs e deixá-las sem o espaço vertical quando uma div é maior que a outra. Alguém sabe como resolver isso usando o flexbox? Por exemplo, eu quero deixar a div de número 4 mais acima, apenas com o margin que eu dei para todas elas, e não esse espaçamento todo que o flexbox faz pra alinhar com a 3 horizontalmente.

OBS: margin-top não é opção, pois não será só a 4 que vai ter que ir pra cima, será uma grade de notícias, que a altura aumenta conforme a quantidade de conteúdo que tem dentro dela, então não tem como dar uma altura exata para as divs.

inserir a descrição da imagem aqui

html, body {margin:0;padding:0;box-sizing:border-box;background:#f2f2f2;}

div#conteudo {
    width:100%;
    min-height:500px;
    background:rgba(0,0,0, .6);
    margin:0 auto;
    margin-top:100px;
    display:flex;
    align-items:flex-start;
    justify-content:center;
    flex-flow:row wrap;
}
div.cont {
    display:flex;
    align-items:flex-start;
    flex-flow:row wrap;
}
div#c1 {
    width:520px;
    min-height:400px;
    background:yellowgreen;
    margin-right:10px;
}
div.cnews {
    color:#fff;
    background:tomato;
    width:250px;
    min-height:250px;
    margin:5px;
    display:flex;
    align-items: center;
    justify-content:center;
    font-size:72px;
}
div.cnews:nth-child(1) {
    height:300px;
}
div.cnews:nth-last-child(1) {
    height:300px;
}
div#c2 {
    width:250px;
    height:800px;
    background:plum;
}
<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Teste</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="conteudo">
        <div class="cont" id="c1">
            <div class="cnews">1</div>
            <div class="cnews">2</div>
            <div class="cnews">3</div>
            <div class="cnews">4</div>
        </div>
        <div class="cont" id="c2"></div>
    </div>
</body>
</html>

0

1 Resposta 1

1

Você tem que fazer o seu container flex ser uma coluna e permitir que os items flex se re arranjem (flex-wrap):

div.cont {
    display: flex;
    align-items: flex-start;
    flex-flow: column wrap;
    justify-content: flex-start;
    height: 620px

você tem que definir o height para que os item criem uma nova coluna quando necessário. encontrei alguns exemplos: https://codepen.io/michellebarker/pen/zvxpoG e https://codepen.io/kattixie/pen/bEYyZb

O problema é que os item vão ficar fora de ordem e tem uma discussão sobre esse assunto pra a criação de uma propriedade pra resolver esse problema. você pode ler ela aqui: https://github.com/w3c/csswg-drafts/issues/945

Também tem uma lib js que pode te ajudar nesse problema. https://salvattore.js.org/

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