Quais são as principais vantagens de usar o estilo flex em CSS?
-webkit-flex
.
Qual é a única vantagem de usar o método flex em vez do método div normal com marcas multimédia para o estilo sensível.
Quase não tinha visto nenhum sítio a usar o flex para a capacidade de resposta.
7 answers
Eu quase não tinha visto nenhum local usando flex para a resposta.
Fonte de CanIUse
A especificação da disposição das Caixas flexíveis CSS está no candidato Fase de recomendação, nem todos os navegadores o implementaram. WebKit a implementação deve ser precedida de-webkit; Internet Explorer implementa uma versão antiga do spec, prefixada; Opera 12.10 implementa a última versão do spec, sem preconceitos. Ver o tabela de compatibilidade em cada propriedade para uma compatibilidade atualizada status.
Flex Box
O novo modo de disposição flexbox está preparado para redefinir como fazemos os layouts No CSS. Infelizmente, a especificação mudou muito recentemente, por isso é implementado de forma diferente em diferentes navegadores. Existem muitos recursos flexbox atualizados por aí.
Flexbox Tem Muitas Características Excitantes, Pois Tem
- pode ser colocado em qualquer sentido de fluxo (para a esquerda, para a direita, para baixo ou mesmo para cima!)
- pode ter a ordem de visualização invertida ou rearranjada na camada de estilo (isto é, a ordem visual pode ser independente da ordem de origem e de fala)
- pode ser estabelecido linearmente ao longo de um único eixo (principal) ou embrulhado em linhas múltiplas ao longo de um eixo secundário (Cruz)
- pode "flectir" os seus tamanhos para responder ao espaço disponível
- podem ser alinhados em relação ao seu contentor ou uns aos outros
- pode ser dinamicamente colapsou ou não colapsou ao longo do eixo principal, preservando o tamanho cruzado do recipiente.
O Problema Com O Antigo Modelo De Caixa
Considere o seguinte código para usar com uma disposição de três colunas.
.col {
width: 33.33%;
padding: 0 5%;
}
Isso não lhe dará de facto colunas que sejam 33.33% wide
, irá criar colunas que sejam {[2] } Isto irá quebrar a disposição das 3 colunas porque a largura combinada das colunas excede 100%. Por outras palavras, o enchimento é adicionado ao já existente largura. Então é enchimento + largura.
Se precisar de criar uma disposição de 3 colunas, normalmente usa o bloco flutuante (ou o bloco em linha), e depois descobre as larguras, paddings e margens necessárias para que se encaixem no contentor-mãe. É uma quantidade desnecessária de trabalho que seria bom evitar, mesmo que já se tenha tornado de segunda natureza.
Encontrei um bom tutorial para o estado actual da implementação do Flexbox aqui .
CanIUse
- O Firefox não suporta especificar as larguras em percentagens. ver insecto .
- Os valores por omissão da IE10 e da IE11 para
flex
são0 0 auto
(veja aqui ) ao invés de0 1 auto
, conforme o projeto, a partir de setembro de 2013. - O Firefox não suporta as propriedades do flex-wrap, alinhar o conteúdo. ver insecto
- em IE10 e IE11, os recipientes com {[[6]} e
flex-direction: column
não calcularão correctamente as dimensões das suas crianças flectidas se as container hasmin-height
but no explicitheight
property. ver insecto . - em cromado e Safari, a altura das crianças (sem flex) não é reconhecida em percentagem. No entanto Firefox e IE reconhecer e escalar as crianças com base em alturas percentuais.
Referências
Definição da Flexbox conforme indicado em specs W3C:
A especificação descreve um modelo de caixa CSS optimizado para a concepção da interface do utilizador. No modelo flex layout, os filhos de um recipiente flex podem ser dispostos em qualquer direção, e pode "flex" seus tamanhos, quer crescendo para preencher o espaço não utilizado ou encolhendo para evitar transbordar o pai. O alinhamento horizontal e vertical das crianças pode ser facilmente manipulado. Nidificação destes caixas (horizontais no interior vertical, ou verticais no interior horizontal) podem ser usadas para construir layouts em duas dimensões.
Vale a pena notar que flexbox não é apenas uma propriedade, mas todo o módulo com um conjunto de propriedades que afetam o fluxo e posicionamento de elementos dentro do elemento pai (geralmente algum tipo de Div de embalagem), uma vez que é definido como recipiente flex. Isto é feito usando display: flex
.
Recursos na flexbox:
VantagensA Flebox permite-nos ter mais controlo sobre o aumento e o comportamento das Caixas/divs/elementos de página Ao alterar o tamanho do ecrã ou a orientação do dispositivo.
Sem flexbox, os métodos para obter uma disposição flexível são:
- basicamente um hack uma vez que é o uso original é permitir que partes do conteúdo para mudar de Posição sem removê-los do fluxo de Documento (ie. posicionar imagens em torno do texto). Eles são usados principalmente para empilhamento horizontal, muitas vezes em conjunção com consultas de mídia e hack
clearfix
.Unidades relativas (% ou em) para dimensionamento - na maioria dos casos funciona bem para a disposição horizontal, mas não oferece nenhum ou pequeno controle para o alinhamento vertical.
Pesquisas com meios de comunicação - utilizadas em conjunção com técnicas superiores mq fazer grampo de RWD, mas em casos mais complexos tendem a se tornar confuso, uma vez que cada consulta tem que conter todas as propriedades que afetam o tamanho e posição do elemento que queremos Ajustar (largura, altura, estofamento, margens, display etc.).
Javascript - alterações dinâmicas das propriedades dos elementos com base noutras variáveis. Também solução hacky, muitas vezes não muito limpo, tributando o tamanho da página e desempenho e obivusly js dependente.
A Flexbox, em parte, é uma combinação "abreviada" de métodos listados acima, mas também tem três vantagens distintivas:
- definir a largura/altura flexível dos elementos, dependendo do espaço disponível
- tanto o centro vertical como o horizontal, sem qualquer hacks e soluções de solução de trabalho
- alterar a ordem dos elementos dentro da disposição sem afectar a estrutura de marcação e de documento (usando a propriedade
order
ouflex-flow
).
Para exemplos mais concretos, por favor, verifique as ligações listadas no final desta resposta.
Suporte de sintaxe e navegador
Ao Longo do tempo, onde algumas mudanças importantes em relação flexbox de sintaxe em vários navegadores, que são muito bem explicado em este artigo, mas com a ampla adoção do prefixo ferramentas como autoprefixer podemos nos ater apenas ao mais recente padrão de sintaxe e automatizar o prefixo (autoprefixer oferece opção para definir o quão longe back we want to go regarding browser support).
Dito isto, o flexbox é suportado em todos os navegadores principais, excepto o IE 9 e inferior. Opera suporta flexbox desde a versão 12.1 e não oferece suporte no Opera Mini (que Choque). Para muitos sites existentes, o uso do flexbox provavelmente significa muito trabalho para benefícios limitados, mas como IE 8 e 9 o uso cai a implementação flexbox vai crescer.
Quando e como deve ser utilizado?
Como indicadoneste artigo flexbox não é pretende-se ser usado para criar disposições de página inteira (para esse propósito existe o módulo css grid actualmente em obras e suficientemente Engraçado, suportado apenas pelo IE), mas para manipular componentes individuais mais pequenos, como as navegações e os elementos da barra lateral.
Por agora, você pode provavelmente detectar suporte por meio de modernizador e fazer backback para o IE lte 9 ou ir fallback-primeiro, aderindo ao básico de trabalho universal e expandir sobre eles para oferecer melhores experiências em navegadores que podem lidar com isso (eu gostaria recomendo este último). Como sempre, vai depender de requisitos específicos do projeto e perfil do VISITANTE deve flexbox ser usado em tudo ou não.Exemplos de Utilização
Eu Não tenho nenhum exemplo real de uso flexbox, mas aqui estão alguns links para casos de Uso facilmente solucionáveis usando flexbox:
A melhor ou maior vantagem do FlexBox é a flexibilidade e o facto de que o navegador irá calcular a maioria das coisas para nós com uma configuração ou codificação mínima e fácil.
Hoje a maioria dos sites usam {[[0]} para o design, mas isso é realmente apenas um hack, porque flutuar era suposto ser apenas uma maneira de cercar uma imagem por texto como em qualquer jornal. Mas tornou-se tão normal que pensamos nisso como a regra. É como quando web designers usaram tabelas para o design; não foi devia ser para isso.
Com o FlexBox, você pode fazer o seu Falso Colunas fácil e "real", você pode definir um (ou mais) de coluna fixa e outro de um (ou mais) flexível sem o uso de hacks como o dilúvio-float combinação -ele lida com o espaço disponível muito bem, você pode reorganizar a ordem dos elementos alterando apenas um número -que vai ser muito legal e útil em combinação com RWD - ou mesmo justificar conteúdo sem a utilização de um monte de hacks para diferentes cenários (display:inline-block
, float
& translate
, etc).
, Então não há realmente nada de novo podemos fazer no final, porque temos encontrado ao longo dos anos uma série de maneiras para lidar/hack nossas necessidades, mas com o FlexBox vamos ter uma ferramenta específica para fazer a maior parte das pessoas doente técnicas em um bom caminho. Eu acho que um bom exemplo é como nós fizemos no passado cantos arredondados com quatro div
s e hoje nós apenas usamos border-radius
. Então, finalmente, poupamos tempo e obtemos um código mais limpo.
- um conjunto normalizado de componentes de interface de utilizador
- Remoting (a capacidade de interface com os serviços web através da transferência objectos dactilografados)
- um melhor fluxo de trabalho de esfola e estilo (do que HTML/CSS na altura)
- gráficos vetoriais eficientes para visualização de dados (gráficos, gráficos, etc)
Grande para listar especialmente em sites e-comerciais ou sites baseados em produtos como livrarias, etc. Digamos que você tem 600x600 px área de exibição para seus produtos a serem listados. Cada caixa de produto tem largura dinâmica devido à imagem do produto dentro, horizontal ou vertical. Flex organiza estas caixas tão bem, que não cai encaixando caixas abaixo e organiza as restantes larguras de caixa e alturas.
Para o suporte do navegador, w3schools estados
A propriedade box-flex é só suportada pela Opera.
O Internet Explorer 10 suporta uma propriedade alternativa, a-ms-flex.O Firefox suporta uma propriedade alternativa, a-moz-box-flex.
O Safari e o Chrome suportam uma alternativa, a-webkit-box-flex propriedade.
Nota: As caixas flexíveis não são suportadas no Internet Explorer 9 e versao.
Cromado Graca Safari Opera (12.1+) IE (10+) s Android Se vamos construir layouts para os navegadores que não suportam o Flexbox, temos que atendê-los como costumávamos fazer. Tecnicamente, é assim que fazemos as coisas atualmente: usando porcentagens, ems e flutuadores combinados com consultas de mídia para criar layouts flexíveis que funcionam em uma infinidade de dispositivos, não apenas consistindo dos smartphones e tablets que usamos hoje.