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.
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>