Flexbox - Visão geral

Cascensão Style Sheets (CSS) é uma linguagem de design simples destinada a simplificar o processo de tornar as páginas da web apresentáveis. CSS controla a aparência e o comportamento de uma página da web.

Usando CSS, você pode controlar a cor do texto, o estilo das fontes, o espaçamento entre os parágrafos, como as colunas são dimensionadas e dispostas, quais imagens ou cores de fundo são usadas, designs de layout, variações na exibição para diferentes dispositivos e tamanhos de tela bem como uma variedade de outros efeitos.

Para determinar a posição e as dimensões das caixas, em CSS, você pode usar um dos modos de layout disponíveis -

The block layout - Este modo é usado no layout de documentos.
The inline layout - Este modo é usado no layout de texto.
The table layout - Este modo é usado no layout de tabelas.
The table layout - Este modo é usado para posicionar os elementos.

Todos esses modos são usados para alinhar elementos específicos como documentos, texto, tabelas, etc., no entanto, nenhum deles fornece uma solução completa para criar sites complexos. Inicialmente, isso é feito usando uma combinação de elementos flutuantes, elementos posicionados e layout de tabela (frequentemente). Mas os flutuadores só permitem posicionar horizontalmente as caixas.

O que é Flexbox?

Além dos modos mencionados acima, CSS3 fornece outro modo de layout Caixa Flexível, comumente chamado de Flexbox.

Usando este modo, você pode criar layouts facilmente para aplicativos complexos e páginas da web. Ao contrário dos flutuadores, o layout Flexbox oferece controle completo sobre a direção, alinhamento, ordem e tamanho das caixas.

Recursos do Flexbox

A seguir estão os recursos notáveis do layout Flexbox -

Direction - Você pode organizar os itens em uma página da web em qualquer direção, como da esquerda para a direita, da direita para a esquerda, de cima para baixo e de baixo para cima.
Order - Usando o Flexbox, você pode reorganizar a ordem do conteúdo de uma página da web.
Wrap - Em caso de espaço inconsistente para o conteúdo de uma página da web (em uma linha), você pode agrupá-los em várias linhas (horizontalmente) e verticalmente.
Alignment - Usando o Flexbox, você pode alinhar o conteúdo da página da web em relação ao seu contêiner.
Resize - Usando o Flexbox, você pode aumentar ou diminuir o tamanho dos itens na página para caber no espaço disponível.

Navegadores de suporte

A seguir estão os navegadores que suportam Flexbox.

Chrome 29+
Firefox 28+
Internet Explorer 11+
Opera 17+
Safari 6.1+
Android 4.4+
iOS 7.1+