Continuo publicando artigos de Rachel Andrew sobre os recursos da tecnologia Flexbox CSS
Artigos anteriores da série:
- O que acontece ao criar um contêiner Flexbox .
- Tudo o que você precisa saber sobre o alinhamento no Flexbox .
- Flexbox: qual é o tamanho dessa caixa flexível? .
Estamos no final da minha série Flexbox aqui na Smashing Magazine . Neste post, vou dedicar algum tempo a pensar sobre quais são realmente as opções de uso do Flexbox , já que agora temos o CSS Grid Layout , darei algumas sugestões sobre o que você pode usar quando e como.
Anteriormente nesta série
Se você ainda não selecionou outros artigos, esta é essencialmente a postagem final; portanto, verifique-os primeiro. Comecei descrevendo o que acontece quando um container flex é criado . No segundo artigo da série, examinei o alinhamento e como alinhamos os elementos ao longo dos eixos principal e transversal no flexbox . No terceiro artigo, eu descompacto como o redimensionamento funciona no Flexbox e como o navegador determina o tamanho do flex. Agora que sabemos exatamente como o Flexbox funciona, podemos nos voltar para pensar nos casos de uso para os quais isso é melhor.
Devo usar Grid ou Flexbox?
Essa ainda é a principal pergunta que me fazem durante o treinamento em layout e, em geral, acredito que à medida que as pessoas se acostumam cada vez mais a trabalhar com novos métodos, essa se torna uma pergunta que você precisa se perguntar com menos frequência. À medida que a experiência aumenta, você entenderá qual método de layout usar.
No entanto, se você está apenas começando a entender esse pensamento, lembre-se de que o CSS Grid Layout e o Flexbox são ambos CSS. Se você especificou display: grid ou display: flex , geralmente usa mais em comum do que diferenças. Grid e Flexbox usam propriedades que fazem parte da especificação de Alinhamento de caixa ; ambos são baseados em conceitos detalhados na especificação CSS de dimensionamento intrínseco e extrínseco. .
Perguntar se o seu design deve usar Grid ou Flexbox é como perguntar se o seu design deve usar tamanho ou cor da fonte. Você provavelmente deve usar os dois, se necessário. E ninguém o perseguirá se você usar o errado.
Portanto, não escolhemos entre Vue.js e React , Bootstrap ou Foundation . Usamos CSS para concluir o layout e precisamos usar as partículas CSS que fazem mais sentido para a parte específica do nosso design em que estamos trabalhando. Revise cada componente e decida o que é melhor para ele ou qual combinação de elementos é melhor para ele.
Pode ser uma grade ou um Flexbox . Pode ser um contêiner de grade externo, no qual alguns elementos da grade se tornam flexíveis ou reversíveis. Não há problema em aninhar o elemento flex , se necessário para o seu projeto.
O que é realmente o Flexbox?
A especificação Flexbox descreve o método de layout da seguinte maneira:
"O layout flexível é semelhante ao layout de blocos . Falta muitas propriedades mais complexas, orientadas a documentos ou textos, que podem ser usadas em layouts de blocos, como carros alegóricos e colunas . Em vez disso, recebeu ferramentas simples e poderosas para alocação de espaço e alinhamento de conteúdo, quais aplicativos da web e páginas da web complexas são necessárias há muito tempo. "
Eu acho que a frase-chave aqui é "alocação de espaço e alinhamento de conteúdo". O Flexbox trata de pegar vários itens (que têm tamanhos diferentes) e colocá-los em um contêiner (que pode ser de tamanho variável). O Flexbox é macio. Ele tenta criar o melhor layout para nossos elementos, dando aos elementos maiores mais espaço e aos elementos menores menos espaço, preservando assim a legibilidade do conteúdo.
Se as pessoas consideram o Flexbox complexo e enigmático, isso ocorre porque tentam usar o Flexbox como um sistema de grade , tentando recuperar o controle sobre o tamanho e a distribuição do espaço. Quando você faz isso, o Flexbox pode parecer estranho e complicado, à medida que você luta com o que o Flexbox faz, ou seja, com sua flexibilidade inerente.
Portanto, os modelos que são muito adequados para layouts flexíveis são aqueles nos quais não estamos tão interessados em ter o tamanho perfeito para cada elemento. Nós apenas queremos que esses elementos apareçam um ao lado do outro.
Também existem padrões nos quais você deseja quebras de linha, mas não precisa de uma grade estrita. Se usarmos o exemplo original Grid vs. Flexbox , onde usamos a sintaxe repetida de preenchimento automático na grade e, em seguida, o contêiner flexível de quebra automática de linha, veremos imediatamente a diferença entre os dois métodos.
No exemplo de grade , os elementos de grade são organizados em linhas e colunas. Quando o número de colunas de uma faixa é alterado (dependendo do espaço), os elementos sempre vão para a próxima célula da grade disponível. De fato, não há como solicitar que um elemento da grade envolva uma faixa para preencher um cenário de fluxo automático se houver outras células vazias.
No exemplo do flex , os elementos resultantes separam o espaço deixado entre eles, portanto, não usamos alinhamento horizontal e vertical.
Se tivermos a base flexível definida como automática e qualquer um dos elementos flexíveis for aumentado, o restante também receberá espaço adicional para que o alinhamento possa ser diferente de linha para linha.
Este é um exemplo muito vívido de onde gostaríamos de usar o Flexbox sobre o Grid Layout . Se queremos que os elementos sejam agrupados, mas ocupem o espaço necessário, linha por linha. Isso é muito diferente da grade. Modelos como esse podem ser um conjunto de tags (uma ou duas palavras que você deseja exibir, bem como um conjunto de elementos) que ocupam o espaço necessário, em vez de serem firmemente inseridos em uma grade estrita.
Atualmente, o Flexbox também é a melhor maneira de centralizar vertical e horizontalmente um elemento dentro de um contêiner.
No futuro (se os navegadores suportarem propriedades de Alinhamento de caixa fora do layout flexível), podemos fazer isso sem adicionar display: flex ao contêiner. No momento, no entanto, tudo o que você precisa fazer é uma linha CSS extra, o que não é um problema.
O Flexbox funciona muito bem com pequenos componentes unidimensionais. Conjuntos de campos de formulário, ícones ou outras informações podem ser facilmente organizados e flexíveis sem a necessidade de dimensionar cuidadosamente cada elemento.
Você também pode selecionar o Flexbox em um cenário em que o conteúdo precisa ser trazido para a parte inferior do contêiner, impedindo que ele seja exibido. No exemplo abaixo, faço do contêiner um contêiner flexível, exibindo o conteúdo como uma coluna e depois deixo o meio crescer, empurrando o rodapé para baixo do componente.
Durante o desenvolvimento, acho o Flexbox útil para muitas tarefas pequenas, realizando o alinhamento corretamente e distribuindo espaço entre os itens. Você pode certamente usar um contêiner de malha unidimensional para algumas dessas tarefas e não se preocupe com o que decide fazer.
No entanto, acho que o Flexbox será o melhor em uma situação em que você precisará adicionar elementos adicionais que eu não esperava no meu design. Por exemplo, se eu tiver um componente de navegação usando o Grid , criaria trilhas suficientes para todos os elementos, pois não gostaria que uma nova linha fosse criada se tivesse elementos "demais". Com o flexbox por tempo suficiente, eu permitia que os elementos fossem flexíveis com base flexível 0 (ou automática ), então os próprios elementos deixariam o novo companheiro entrar na linha, liberando espaço para ele.
Quando você não deve usar o Flexbox?
Analisamos algumas considerações para as quais acho que você deve preferir o Flexbox ao layout de grade ; portanto, agora podemos ver alguns dos locais em que o Flexbox pode não ser a melhor opção. Já vimos nosso exemplo do Flexbox versus grade com elementos alinhados horizontal e verticalmente contra elementos que ocupam espaço linha por linha. E essa diferença é a primeira coisa a considerar.
O exemplo da grade possui um layout bidimensional. Layout por linha e coluna ao mesmo tempo.
Exemplo O Flexbox é um layout unidimensional. Empacotamos linhas flexíveis, mas a colocação no espaço acontece linha por linha. Cada linha atua essencialmente como um novo contêiner flex na direção Flex.
Portanto, se seu componente precisar de um layout bidimensional, seria melhor usar uma Grade em vez de Flexbox . Não importa se é um componente grande ou pequeno. Se você entender algo deste artigo, remova da sua cabeça a idéia de que, por algum motivo, o Grid se destina apenas ao layout da página principal e o Flexbox aos componentes. Você pode ter um pequeno componente que requer um layout bidimensional e uma estrutura de página principal mais adequada a um layout unidimensional.
Outro bom lugar onde uma Grade pode ser considerada a melhor solução é usar a largura ou definir a base flexível como a unidade de comprimento de seus elementos flexíveis para alinhá-los com outra linha de elementos flexíveis ou apenas para limitar a flexibilidade de alguma forma. Frequentemente, isso indica que você realmente precisa de um método de layout bidimensional ou que o controle do contêiner da grade é mais adequado ao seu layout.
Por exemplo, podemos fazer nosso layout flexível parecer mais com uma grade , limitando a flexibilidade de nossos elementos. Definir flex-grow como 0 e calcular o tamanho dos elementos em porcentagem, semelhante à forma como determinamos o tamanho dos elementos em uma "grade" flutuante. Se você estiver fazendo isso, sugiro que um layout de grade seja a melhor abordagem, pois foi projetado para esse tipo de layout.
Com tudo isso dito, lembre-se de que muitas vezes não há uma resposta certa ou errada clara. Às vezes, a única coisa que você pode fazer é tentar métodos diferentes e ver o que funciona melhor para o componente. Lembre-se de que você também pode alternar os métodos de layout usando o Flexbox em um ponto de interrupção e a Grade para outro.
E então, enrolar!
Espero que esta série Flexbox tenha sido útil e demonstrou como o entendimento de alguns algoritmos de alinhamento e calibração para itens flex facilita a vida deles.
Se você tiver alguma dúvida não resolvida ou um modelo que parece não ter uma resposta óbvia em termos do método de layout usado, deixe um comentário.