Flex Layout
Uma nova alternativa para posicionamento.
Elementos como tables, alinhamentos com floats ou inline blocks, e outras propriedades CSS eram usados a muitos tempo por desenvolvedores front-end para exibir o conteúdo do site e posicionar elementos nos sites na nossa web.
No entanto, nenhuma dessas ferramentas foi projetada para as páginas Web complexas e aplicações Web que estamos fazendo hoje em dia, cheias de estilo e com posicionamentos variados. Coisas simples como centralização vertical, e vários elementos em bloco exigem um bom trabalho para sua aquisição. O Flexbox pretende mudar tudo isso.
O Flexbox nos ajuda a organizar os elementos em nossa página sem a dependência do float e do Box Model, que por vezes acontecem problemas quando envolvemos padding, margin e border em sua estrutura.
A idéia geral do Flexbox é que os filhos de um elemento com Flexbox pode se posicionar em qualquer lugar e direção, podendo também ter dimensões flexíveis para se adaptar, dependendo das especificações do projeto CSS através de várias de acordo com sua especificação, a propriedade Flexbox tem uma gama variada de elementos que vai revolucionar a questão do posicionamento dos web sites.
Antes da apresentação das propriedades de Flexbox, propriamente ditas, que controlam e customizam um layout Flexbox, existem 2 conceitos e termos que é preciso estar familiarizado: Eixos Flex (Flex Axis) e Linhas Flex (Flex Lines).
As propriedades Flex Box são: flex-direction, flex-wrap, flex-flow, justify-content, align-items, align-content, order, align-self, flex-grow, flex-shrink, flex-basis, flex.
Como usar?
Faremos testes utilizando algumas tags próprias para demonstrar a utilização do Flexbox. A demonstração ilustrada na tela através de gifs que serão nomeados como Exemplo 1.
Alguns testes feitos serão com base na figura mostrada como exemplo 1.
No código acima é demonstrado o uso do display e do flex direction que especifica a direção dos itens flexíveis dentro do container flexível. A propriedade flex especifica o comprimento do item flex, em relação ao restante dos itens flex dentro do mesmo. O valor padrão de flex-direction é row (da esquerda para a direita, de cima para baixo).
Apliquei a propriedade hover com o flex-direction: row, e o resultado foi o que onde existia uma coluna em bloco com a adição do hover agora existe uma coluna linear semelhante ao display: inline-block, sendo uma nova alternativa para design de blocos no geral. Os outros valores para flex-direction são: row-reverse, column e column-reverse.
No exemplo 2 utilizei os a primeira parte do exemplo 1 e adicionei:
No exemplo acima utilizei tags responsivas para demonstrar o uso do order, a propriedade order contra a ordem em aparecem no container flex.
O exemplo 3 mostra a propriedade flex-wrap, os itens Flex tentarão encaixar em uma única linha. Você pode alterar isso e permitir que os itens para quebrar conforme necessário com esta propriedade. No exemplo 3 são colocados seis caixas verdes em um fundo vermelho onde a principio elas estão em coluna, com a aplicação do flex-wrap elas se ordenam de forma que todas são encaixadas inline sendo a última figura inline colocada abaixo das demais caso não consiga se encaixar o backgound padrão.
No Exemplo 4 está sendo mostrado a propriedade Justify-content, a propriedade justify-content alinha horizontalmente os itens do container flexível quando os itens não usam todo o espaço disponível no eixo principal, como demonstrado no exemplo 4. Os valores possíveis são: flex-start, flex-end, center, space-between, space-around.
No Exemplo 5 está sendo mostrada a propriedade Align-items, a propriedade alinha verticalmente os itens do container flexível quando os itens não usam todo o espaço disponível no eixo transversal. Os valores possíveis são: center, baseline, flex-end, flex-start, stretch.
Existe a propriedade Align-content, alinha as linhas de um flex container quando há espaço extra no Cross Axis, similarmente ao que justify-content. az com items individuais no Main Axis. Essa propriedade não apresenta qualquer efeito quando o flex container tem somente 1 linha. Os valores possíveis são: center, baseline, flex-end, flex-start, stretch.
Considerações Finais
Flexbox é a nova forma e mais prática maneira de se criar e organizar layouts com CSS3. Através de suas várias propriedades/possibilidades(que são inúmeras), a propriedade Flexbox tem uma gama variada de elementos que vai revolucionar a questão do posicionamento dos websites.
Acredito que o Flexbox surge como ótima ferramenta para desenvolvedores front-end que não se permitem ficar presos a antigos elementos. Flexbox é um método eficaz e flexível para gerenciar todos os tipos de layouts. Graças a este método não há praticamente nenhum tempo de atraso entre a direita e errada renderização do seu layout.
Como vemos na figura extraída do site http://desenvolvimentoparaweb.com/css/flexbox/, o Flexbox é compatível com todos navegadores citados acima mas, em versões mais antigas de navegadores é necessário o ajuste de compatibilidade para que seu uso seja o adequado e não haja falhas no projeto final.
