O que é o flexbox?

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:

• CSS-Tricks guide to flexbox

• Guia MDN

• Artigo do Opera sobre o básico flexbox

Vantagens

A 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 ou flex-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:

• Caixas que preencham altura (ou mais) (e não esmaguem)

• Resolvido pelo flexbox

• Elementos de centragem com flexbox

• Truques com Flexbox para padrões CSS melhores

• Flexbox cheatsheet

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 divs e hoje nós apenas usamos border-radius. Então, finalmente, poupamos tempo e obtemos um código mais limpo.

Acho eu.) este ano vamos ver um aumento importante do uso do FlexBox, uma vez que o fim do XP está aqui e o IE8 vai morrer-e eu acho que os usuários vão atualizar para outra versão do Windows com o IE10/11.

Eu diria que a principal vantagem do Módulo de disposição de caixa flexível é que ele calcula tudo para você. Você não precisa calcular a quantidade de espaço que um elemento ocupará com margens, estofamento, etc. É feito automaticamente.

• 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.

Passei por alguns posts e a minha escolha foi 'usar Flexbox', dos CSS-Tricks do Chris Coyier. http://css-tricks.com/using-flexbox/ O artigo dá uma grande quebra de exatamente o que você precisa fazer para que o Flexbox funcione em tantos navegadores quanto possível. Sob a sub-rubrica de Suporte do navegador, ele nos dá a lista suportada de navegadores, obviamente, com a ressalva de, 'se você fizer todo esse tecelagem, você pode obter':

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.