Como usar o Flexbox para criar um layout de design de cartão CSS moderno

Graças ao Flexbox, um novo modo de layout em CSS3, podemos colocar todos os nossos cartões em sequência—literalmente. Os designs de cartões cresceram em popularidade nos últimos anos; como você deve ter notado, os sites de mídia social realmente adotaram os cartões. O Pinterest e o Dribbble usam layouts de cartão para apresentar informações e recursos visuais. E se você gosta de Material Design, os cartões do Google estão bem descritos em sua biblioteca de padrões.

Eu pessoalmente gosto de layouts de cartão por sua legibilidade e como eles são roláveis. Eles apresentam a “explosão” perfeita de informações de uma maneira fácil de navegar, rolar e digitalizar tudo de uma vez.

Como criar um layout de cartão

Se você já tentou linhas de conteúdo de altura uniforme, sabe que construí-las nem sempre foi fácil. Você provavelmente teve que fazer um pouco de violino para fazê-lo funcionar no passado. Graças ao Flexbox, esses dias ficaram para trás. Dependendo do nível de suporte do navegador que você precisa fornecer, talvez seja necessário incluir alguns fallbacks, mas o suporte do navegador para esse recurso é bastante confiável atualmente. Para estar seguro, certifique-se de verificar o Flexbox no confiável Can I use. E lembre-se, você nunca deve fazer alterações em seu site ao vivo. Tente experimentar o Local, um aplicativo de desenvolvimento local gratuito do WordPress.

A ideia básica do Flexbox é que você pode definir a propriedade display de um container como flex , que irá “flexionar” o tamanho de todos os containers dentro dele. Colunas de altura igual e as opções de dimensionamento e contratação simplificarão a forma como os layouts avançados podem ser criados. Começar com cartões é como uma folha de dicas do Flexbox, mas depois de dominar o básico, você pode criar layouts mais complexos.

Flexbox e versatilidade

Os cartões são versáteis, visualmente atraentes e fáceis de interagir em dispositivos grandes e pequenos, o que é perfeito para um design responsivo. Cada cartão atua como um contêiner de conteúdo que pode ser facilmente dimensionado para cima ou para baixo. À medida que os tamanhos de tela ficam menores, o número de cartões na linha normalmente diminui e eles começam a se empilhar verticalmente. Há flexibilidade adicional, pois podem ter uma altura fixa ou variável.

Como criar o layout

Criaremos um layout de cartão Flexbox que possui uma linha de quatro contêineres horizontais em telas maiores, dois em média e uma coluna para dispositivos pequenos.

Abaixo está o trecho de código para criar um layout básico para mostrar quatro cartões. Não estou incluindo o conteúdo do cartão interno (já que fica muito longo nos exemplos de código), portanto, certifique-se de colocar algum conteúdo inicial nele (e faça com que a quantidade de conteúdo varie entre os quatro cartões). Além disso, há uma linha de quatro cartões mostrados aqui para começar, mas mais podem ser adicionados se você quiser ver o comportamento com várias linhas de conteúdo. Todo o código pode ser encontrado no Codepen.

Para exibir nosso design de layout em um padrão de grade, precisaremos começar do lado de fora e trabalhar para dentro. É importante certificar-se de fazer referência ao contêiner correto, caso contrário, as coisas ficarão um pouco confusas.

A seção com uma classe de .cards é o que iremos focar primeiro. A propriedade display do container é o que precisamos mudar para flex .

Aqui está o HTML com o qual você deseja começar:

<div class="centered">

            <section class="cards">
                
                <article class="card">
                   <p>content for card one</p>
                </article><!-- /card-one -->

 	<article class="card">
                   <p>content for card two</p>
            </article><!-- /card-two -->

<article class="card">
                  <p>content for card three</p>
            </article><!-- /card-three -->

<article class="card">
                   <p>content for card four</p>
            </article><!-- /card-four -->

	</section>
</div>

Aqui está o CSS para começar:

.cards {
   display: flex;
   justify-content: space-between;
}

Propriedade flexível

Antes de aprofundar muito, é bom conhecer o básico da propriedade flex. A propriedade flex especifica o comprimento do item, em relação ao resto dos itens flexíveis dentro do mesmo container. A propriedade flex é um atalho para as propriedades flex-grow , flex-shrink e flex-basis . O valor padrão é 0 1 auto; . Na minha opinião, a melhor maneira de entender completamente o Flexbox é brincar com os diferentes valores e ver o que acontece.

A propriedade flex-grow de um item flex especifica a quantidade de espaço dentro do container flex que o item deve ocupar.

A propriedade flex-shrink especifica como o item será reduzido em relação ao restante dos itens flexíveis dentro do mesmo contêiner.

A propriedade flex-basis especifica o tamanho principal inicial de um item flex. Esta propriedade determina o tamanho do content-box, a menos que especificado de outra forma usando box-sizing. Auto é o padrão quando a largura é definida pelo conteúdo, que é semelhante à width: auto; . Ocupará o espaço definido pelo seu próprio conteúdo. Pode haver um valor especificado que permanece verdadeiro como visto no flex-basis: 15em; . Se o valor for 0, as coisas estão bem definidas porque o item não se expandirá para preencher o espaço livre.

Começamos com display: flex; e justify-content: space-between; e neste ponto, as coisas são um pouco imprevisíveis. O Flexbox está sendo usado, embora não seja super óbvio agora. Com esta declaração, cada um dos itens flexíveis foi colocado um ao lado do outro em uma linha horizontal.

Veja isso no Codepen.

Você provavelmente está se perguntando por que cada um desses itens flexíveis tem uma largura diferente. O Flexbox está tentando descobrir qual é a menor largura padrão para cada um desses itens. E por causa de vários comprimentos de palavras e outros elementos de design, você acaba com essas caixas de tamanhos diferentes. Para obter uma aparência consistente, precisaremos trabalhar um pouco mais. Definir um envoltório e determinar a largura desejada ajudará a torná-los uniformes.

.cards {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
}

Por padrão, todos os itens flexíveis tentarão caber em uma linha. Adicionando o flex-wrap: wrap; faz com que os itens se enrolem um embaixo do outro porque o padrão é largura total.

Veja isso no Codepen.

A largura total é ótima para dispositivos pequenos, então vamos ter isso em mente enquanto planejamos nossa tela maior antes de abordar vários pontos de interrupção. Quando alteramos a largura, os cartões começam a parecer mais uniformes.

Precisamos adicionar a classe .card agora para estilizar nossos cartões individuais. Isso pode ir logo abaixo dos estilos .cards .

.cards {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
}

.card {
	flex: 0 1 24%;
}

Lembre-se de antes, a propriedade flex é uma abreviação: flex-grow é 0, flex-shrink é 1 e a width é 24%. Ao adicionar uma largura especificada, isso nos dá uma linha de quatro com algum espaço entre elas.

Veja isso no Codepen.

Definimos a propriedade justify-content para fins de espaçamento. O primeiro item é exibido à esquerda, o segundo e o terceiro itens são exibidos no meio e o quarto item é exibido à direita. Como a largura do cartão é de 24%, resta algum espaço, pois nossas quatro colunas em 24% não totalizam 100%. Temos 4% restantes para ser exato. Esses 4% são colocados igualmente entre cada um dos itens. Portanto, temos aproximadamente 1,33% de espaço entre os cartões.

Veja isso no Codepen.

Podemos ser mais precisos também usando calc . Alterar o valor flex-basis para usar calc ficaria assim:

.card {
	flex: 0 1 calc(25% - 1em);
}

O legal disso é que o navegador vai pegar 25% do espaço e remover 1em dele, o que torna os cartões um pouco menores.

É uma maneira inteligente de ajustar o espaço disponível. O 1em é distribuído uniformemente entre os itens e acabamos com o layout perfeito.

Até agora, nós realmente não falamos muito sobre altura. Adicionei outra linha de cartões para demonstrar como a altura funciona. Depende de qual cartão tem mais conteúdo - a altura dos outros seguirá. Portanto, cada linha de conteúdo terá a mesma altura.

Esta é uma visualização muito “diminuída”, mas você notará que a primeira linha é bastante alta porque o segundo cartão tem mais texto do que os outros nessa linha. A segunda linha tem menos texto, portanto, no geral, é mais curta.

Cartões para dispositivos menores

Atualmente, temos quatro colunas em todas as telas, o que não é realmente uma prática recomendada. Se você diminuir a janela do seu navegador, verá que os quatro cartões ficam mais espremidos em telas menores, o que não é ideal para legibilidade. Felizmente, com as consultas de mídia, as coisas começarão a parecer muito melhores.

Para começar a resolver o problema, os pontos de interrupção especificados garantirão que o conteúdo seja exibido corretamente em todos os diferentes tipos de tela.

Aqui estão os seguintes pontos de interrupção que serão usados ​​(sinta-se à vontade para usar os seus também, os conceitos ainda se aplicam):

@media screen and (min-width: 40em) {
    .cards {
   }

    .card {
    }
}

@media screen and (min-width: 60em) {
    .cards {
   }
    
    .card {
     }
}


@media screen and (min-width: 52em) {
    .centered {
       
    }
}

Tem sido um grande pensamento até agora. Vamos entrar na mentalidade mobile-first e começar com o ponto de interrupção min-width: 40em .

@media screen and (min-width: 40em) {
    .cards {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .card {
        flex: 0 1 calc(25% - 1em);
    }
}

Com essas alterações, os cartões serão exibidos na largura da tela inteira e empilhados um abaixo do outro em qualquer tela menor que cerca de 640 pixels de largura. Se você expandir a janela do navegador para algo acima disso, a coluna de quatro retornará. Isso faz sentido porque há uma min-width mínima de 40em e é aqui que criamos a linha de quatro cartões.

O que está faltando aqui é o meio termo. Para a faixa intermediária, ter duas cartas seguidas é mais legível, em vez das quatro cartas esmagadas. Antes de descobrirmos a linha de dois cartões, outra consulta de mídia precisa ser adicionada para acomodar as telas maiores, que terão a linha de quatro cartões.

@media screen and (min-width: 60em) {
    .card {
        flex: 0 1 calc(25% - 1em);
    }
}

A nova media query com min-width mínima de 60em é onde os quatro cartões serão declarados. A min-width mínima de 40em é onde a linha de duas cartas será declarada. A mágica está acontecendo com o valor flex calc de 50% – 1em.

@media screen and (min-width: 40em) {
    .cards {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .card {
        flex: 0 1 calc(50% - 1em);
    }
}

Com essa simples mudança, as coisas agora estão funcionando! Reduza e expanda a janela do navegador para garantir que tudo pareça correto.

Veja isso no Codepen.

Se suas fileiras de cartas parecerem corretas, então você está pronto para ir! Se você está tentando este tutorial e tem uma última linha desigual, continue lendo.

Conteúdo dinâmico e espaçamento da última linha de cartões

Dependendo do seu número de cartas, você pode ou não ter uma última linha boba. Se houver uma última linha completa ou apenas uma carta extra, não haverá problema. Às vezes, você terá seu conteúdo planejado com antecedência, mas se o conteúdo for dinâmico, a última linha de cartões pode não se comportar como você pretendia. Se houver mais de um cartão extra e o conteúdo justificado estiver definido, o espaço entre eles será uniforme e poderá não se alinhar com a(s) linha(s) acima.

Para obter esse visual, é necessário uma maneira diferente de pensar. Eu diria que isso não é tão eficiente, mas é relativamente simples.

O estilo .cards e .card foi feito fora de uma consulta de mídia:

.cards {
    display: flex;
    flex-wrap: wrap;
 }

.card {
    flex: 1 0 500px;
    box-sizing: border-box;
    margin: 1rem .25em;
}

As consultas de mídia são onde o número de cartões é determinado:

@media screen and (min-width: 40em) {
    .card {
       max-width: calc(50% -  1em);
    }
}

@media screen and (min-width: 60em) {
    .card {
        max-width: calc(25% - 1em);
    }
}

Dê uma olhada no Codepen para ver a solução modificada.

Espero que isso lhe dê uma visão geral básica dos conceitos do Flexbox que o ajudarão a começar. O Flexbox tem um suporte de navegador muito bom e os layouts de cartão continuarão a ser utilizados nos designs de sites. E lembre-se, os layouts de cartão são apenas o começo de como você pode utilizar o Flexbox.

Próximo: Crie sites WordPress mais rápido

Neste guia, abordaremos dicas sobre como trabalhar mais rápido e acelerar seu fluxo de trabalho do WordPress. Desde a configuração inicial do site até o envio ao vivo, descubra como você pode reduzir horas de trabalho do seu dia-a-dia!

Baixe o guia gratuito aqui!

O que mais você construiu usando o Flexbox? Compartilhe seus projetos nos comentários!