3

Estou utilizando o WordPress, minha seção Blog está organizada da seguinte forma:

Exemplo 1

Estou utilizando simplesmente {display: flex; justify-content: space-between;} que no caso o resultado é como o do primeiro exemplo. O resultado que quero alcançar é:

Exemplo 2

Não criei duas divs para o conteúdo por justamente serem artigos do Blog, ou seja, devem ficar na ordem de postagem. Se eu quebrar em duas divs o widget de artigos, que é padrão do WordPress, repetiria em ambas as divs. Enfim, gostaria que as postagens do blog ficassem em ordem, numa mesma div e em duas colunas:

inserir a descrição da imagem aqui

Não sabia ao certo como procurar tal resposta então se houver duplicata, me avisem. Muito obrigado desde já (:

2
  • Cara vc mesmo está fazendo o Tema? Se possível coloque seu html/css. Vc está usando Boostrap??
    – hugocsl
    Commented 26/04/2018 às 13:59
  • 1
    @hugocsl então Hugo na verdade é um theme da comunidade WP que estou modificando eu mesmo...
    – HaddockAC
    Commented 27/04/2018 às 12:37

2 Respostas 2

5

Na div pai, você precisaria definir duas propriedades que definem como os elementos devem agir quando precisam fazer essa quebra de linha.

A primeira seria flex-direction: row | row-reverse | column | column-reverse;. Ela informa qual será a direção em que o elemento "crescerá".

A segunda seria flex-wrap: nowrap | wrap | wrap-reverse;. Ela informa como deve ser feita a quebra de linhas do elemento.

Para facilitar, existe a versão encurtada essas duas propriedades, que é a flex-flow, a qual você passa como primeiro argumento a direção e em segundo a quebra de linha.

Fiz de forma bem rápida um código que acho que vai te ajudar. Você pode ver funcionando no CodePen.

Um link bem legal para ter como referência é o do CSS-Tricks, nele contém uma explicação detalhada de propriedades do flexbox.

1
  • era exatamente o que eu estava precisando, muito obrigado!!
    – HaddockAC
    Commented 27/04/2018 às 12:35
3

Aqui tem um modelo que vai quebrando a linha a cada 3 itens. Tudo responsivo usando flex-box. Deixei o item-7 para vc ver que ele vai quebrar conforme a lista for crescendo. OBS: fiz um comment no CSS sobre como ajustar as margens entre um box e outro se vc quiser mudar a distancia.

Explicação: A propriedade que faz a linha de itens quebrar é a flex-wrap:wrap, e ela quebra de 3 em 3 por que cada bos tem a largura de 1/3, logo 3 .box somam 100% e o item 4 acaba sendo "jogado" para a linha de baixo. Documentação oficial do flex-box: https://www.w3.org/TR/css-flexbox-1/

Se quiser que o box item-7 fique alinhado no meio basta colocar justify-content:center no .wrapper

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
.wrapper {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    background-color: red;
}
.box {
    box-sizing: border-box;
    padding: 1rem;
    margin: 1rem;
    background-color: silver;
    width: calc((100% / 3) - 2rem); /* calco para descontar a margem da largura do box se aumenta a marge tem que ajustar aqui tb */
}
<div class="wrapper">
    <div class="box">imte 1</div>
    <div class="box">imte 2</div>
    <div class="box">imte 3</div>
    <div class="box">imte 4</div>
    <div class="box">imte 5</div>
    <div class="box">imte 6</div>
    <div class="box">imte 7</div>
</div>

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 .