Isto é não um estudo abrangente. Apenas as principais diferenças e semelhanças que encontrei.
Pode até haver alguns erros que eu ignorei (deixe-me saber se você encontrar algum).
Todos os diagramas foram retirados do meu Dicionário Visual CSS livro.
Você pode venha aqui empacotado junto com Gramática JavaScript.
Ou você pode apenas Siga me no twitter onde eu compartilho mais dos meus tutoriais.
Meu objetivo não é dizer que um é melhor que o outro. Mas, para ajudar alguém que está apenas começando, tenha uma perspectiva dos casos de uso geral para flexbox e grade.
Diferentes modelos de layout
Grade e flex seguem modelos de layout diferentes.
Grade possui modelos de coluna e linha com itens “fantasmas” assumidos.
O Flex não foi projetado para criar grades. Baseia-se na ideia de uma linha e direção flexíveis. No entanto, o flex ainda pode manipular linhas e colunas usando embrulho:
Nota: sem flex-wrap: wrap O flex continuaria sendo renderizado em uma única linha.
Grade é definida por linhas de modelo de grade e colunas de modelo de grade.
A grade assume espaços reservados “fantasmas” para itens ausentes (elementos HTML).
Geralmente, o flex não é usado para criar grades, mas para alinhar linhas e colunas. Mas…
Para simular uma grade com o flex, você teria que definir flex-wrap propriedade para embrulho.
Espaços e linhas de grade vs. linhas Flex
Grade tem lacunas e linhas. O Flex possui linhas flexíveis mas eles são usados em um contexto diferente.
FLEX fornece apenas uma linha flexível que define a direção geral do item. É determinado por direção flexível propriedade (definida como linha ou coluna.) Existe um eixo principal (x) e um eixo transversal (y). flex-start e flex-end pode mudar dependendo direção flexível.
REDE permite alterar o tamanho do espaço. Mas você não pode alterar o tamanho das lacunas individuais por dimensão: quando o tamanho do intervalo for definido com intervalo de linha de grade todos linha lacunas devem ser desse tamanho. O mesmo vale para gap-coluna-grade.
Para definir todos os tamanhos de espaço ao mesmo tempo, você usaria o intervalo de grade forma abreviada.
Células, Itens e Conteúdo
Ao trabalhar com os modelos flex e grid, é importante entender a diferença entre células, Itens e conteúdo.
Ambos podem mudar a direção do fluxo
Tanto a flex quanto a grade podem mudar a direção do fluxo dos itens.
Por padrão grid-auto-flow e direção flexível estão definidos como linha:
Alterando o fluxo de direção para a coluna
Aqui também aumentei o número de itens no flex apenas para ver como ele funciona.
O mesmo exemplo acima, exceto com o fluxo de direção alterado para coluna:
Outra distinção menor
Vamos dar uma olhada na renderização real da grade com todos os 9 itens.
Rede adere ao tamanho do célula mas conteúdo sangrará (se sobrepor) sem redimensionar.
Flex os itens são embalados o mais próximo possível e serão redimensionados para corresponder ao conteúdo.
Observe como o conteúdo interno da grade não redimensionar a célula. Conteúdo flexível faz.
Nisso flex exemplo, alguma margem foi adicionada ao conteúdo. Ainda está densamente lotado.
Quais são as semelhanças?
Ambos fazem praticamente as mesmas coisas quando se trata de alinhar itens internos. Algumas propriedades têm exatamente os mesmos nomes (ajustar conteúdo e itens de ajuste por exemplo, servem exatamente o mesmo objetivo de alinhar interior conteúdo e / ou itens.)
Flutuador multidirecional em Flex e Grid
Lembro-me dos momentos em que usamos flutuador Propriedade CSS para “flutuar” elementos. Só funcionou horizontalmente! Felizmente, esses dias se foram há muito tempo. Aqui está a configuração do 360:
o justificar-se e alinhar-se As propriedades funcionam exatamente da mesma maneira em ambas.
Se tantas propriedades produzem os mesmos resultados exatos em flex e grid, qual é a diferença? Basicamente, existem três maneiras de pensar sobre o alinhamento de itens.
Ver abaixo.
Justificar e alinhar
Às vezes, as coisas não se alinham conforme o esperado. Isso ocorre porque diferentes propriedades de alinhamento são personalizadas para situações específicas.
Este diagrama explica o relacionamento entre as propriedades justificar e alinhar.
- -conteúdo propriedades baseadas justificam e alinham o conteúdo em massa.
- -auto propriedades justificam e alinham itens individuais.
- -Itens As propriedades justificam e alinham todos os itens no contêiner.
Conclusão
- Aprenda a distinção entre recipiente, Itens, conteúdo e auto.
- Tanto o grid quanto o flex podem fluir na direção de linha (padrão) e coluna.
- Rede pode se estender por várias linhas e colunas. Flex não podes.
- Item e sua alinhar conteúdo interno é exatamente o mesmo em flex e grid.
- Rede tem modelos, lacunas e linhas. Flex tem linhas e quebra não padrão.
- Flex pode ser usado para criar semelhante a uma grade layouts usando largura e quebra explícitas de itens.
- Use a grade para mapear o layout responsivo para as maiores áreas de layout.
- Você pode usar a grade com itens flexíveis. Ou flexione com itens flexíveis.
- Nota: com a grade, você pode evitar consultas de mídia para criar layouts responsivos se aprender a usar unidades fr junto com min-max.
- Também é possível usar consultas de mídia com o flex, não apenas a grade.
- Você ainda pode usar layouts somente flexíveis – os itens também podem ser contêineres flexíveis.
- Nos testes de desempenho, o flex geralmente é processado mais rapidamente que a grade. Mas se você já é bom no grid, não me preocuparia em mudar, a menos que haja uma boa razão.
- A grade pode criar layouts responsivos sem consultas de mídia.
Mais tutoriais em grade e flex
Se você quiser dar uma olhada super detalhada no Flex ou Grid isoladamente:
Deseja ver todas as propriedades CSS explicadas visualmente?
- Todos os diagramas foram retirados do meu Dicionário Visual CSS livro.
- Você pode venha aqui empacotado junto com Gramática JavaScript.
- Ou você pode apenas Siga me no twitter onde eu compartilho mais dos meus tutoriais.