css - Como "desalinhar" as divs com Flexbox? - Stack Overflow em Português
Como criar "grid" com elementos flutuantes semelhante ao Pinterest (1 resposta)
Como deixar DIVs auto-ajustáveis verticalmente? (3 respostas)
Como posicionar uma div embaixo de outra com tamanhos variados? (2 respostas)
Box de diferentes altura se encaixarem igual Pinterest (4 respostas)
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;}
background:rgba(0,0,0, .6);
div#c1 {
div.cnews {
div.cnews:nth-child(1) {
div.cnews:nth-last-child(1) {
div#c2 {
<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 class="cont" id="c2"></div>
editada 20/10 às 5:54
perguntada 20/10 às 5:26
Ytalo GabrielYtalo Gabriel
Você tem que fazer o seu container flex ser uma coluna e permitir que os items flex se re arranjem (flex-wrap):
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/
respondida 20/10 às 12:52
matheus ale da silvamatheus ale da silva
12222 medalhas de bronze
Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag css flexbox alinhamento ou faça sua própria pergunta.