Caixa flexível , ou Flexbox em suma, é um conjunto de propriedades em CSS introduzido em 2009 para fornecer um sistema de layout novo e excepcional. O módulo Flexbox é identificado como parte da terceira versão do CSS (CSS3).

Você provavelmente já está usando muitas das novas propriedades em CSS3, como box-shadow, border-radius, gradientes de fundo , e assim por diante. No entanto, o Flexbox ainda não viu a ampla adoção que merece. Isso pode ser devido a todas as mudanças significativas que sofreu ao longo dos anos, ou porque é apenas parcialmente suportado no Internet Explorer 10, ou apenas porque o Flexbox é um ecossistema completo, enquanto os paradigmas anteriores foram predominantemente baseados em um único, pronto para ir propriedades.

É superpoderoso e oferece um amplo leque de opções para conseguir layouts que, antes, apenas se sonhavam.

Este artigo irá guiá-lo pelos fundamentos do Flexbox e como você pode usá-lo para obter alguns layouts realmente interessantes que, de outra forma, exigiriam hacks CSS complicados ou mesmo JavaScript.

Por que usar o Flexbox?

Por padrão, os elementos de nível de bloco HTML empilham, então se você quiser alinhá-los em uma linha, você precisa contar com propriedades CSS como float, ou manipular o display propriedade com configurações de table-ish ou inline-block.

Se você optar por usar float (esquerda ou direita), você deve limpe o invólucro em algum ponto para empurrá-lo até o último elemento flutuante, caso contrário, eles transbordarão de qualquer coisa que vier depois. No entanto, com float, você está limitado a organizar os elementos horizontalmente.

Alternativamente, ou além disso, você pode manipular o display propriedade para tentar alcançar o layout que deseja! Mas isso muitas vezes parece confuso na melhor das hipóteses, para não mencionar tedioso, e muitas vezes resulta em um layout bastante frágil que não será necessariamente renderizado de forma consistente em todos os navegadores. Essa abordagem é particularmente ineficaz se você tem como alvo vários dispositivos de tamanhos variados - o que quase sempre é o caso hoje em dia.

Entre no Flexbox!

Com uma regra simples aplicada a um elemento pai, você pode controlar facilmente o comportamento do layout de todos os seus filhos.

Com o Flexbox, você pode:

• Inverta a ordem dos elementos dentro de um pai Flexbox.
• Envolva os elementos filho em colunas (o número de colunas pode variar dependendo da altura do filho e do pai).
• Especifique a taxa na qual os elementos aumentam ou diminuem enquanto o tamanho da viewport muda.
• Controle se os elementos são encolhíveis ou não, independentemente do tipo de unidade de largura especificada (relativa ou absoluta).
• Altere a ordem dos elementos com CSS (combine isso com consultas de mídia e você encontrará possibilidades ilimitadas em seu fluxo).
• Gere distribuições complexas dos elementos para serem equidistantes com o espaço ao redor ou apenas entre eles.
• Gere elementos 'renegados' que fluem de forma diferente (todos para a esquerda, exceto um para a direita, superior / inferior ... a decisão é sua).
• E, o mais importante, evite o hack claro para o bem!

Eu entendo que o Flexbox pode ser difícil no começo. Acho que é mais fácil aprender dez propriedades CSS não relacionadas do que cinco com alguma interdependência. No entanto, com suas habilidades atuais em CSS, e talvez com uma pequena ajuda deste artigo, você se lançará em um novo universo CSS.

O básico do Flexbox

Exibição

display é uma das propriedades mais básicas em CSS e é bastante importante no contexto do Flexbox, pois é usado para definir um flex wrapper.

Existem dois valores possíveis de flex wrapper: flex e inline-flex.

A diferença entre os dois é que a display: flex wrapper atua como um elemento de bloco enquanto um display: inline-flex wrapper atua como um bloco embutido. Além disso, inline-flex os elementos aumentam se não houver espaço suficiente para conter os filhos. Mas, além dessas diferenças, o comportamento dos dois seria o mesmo.

Experimente o código de exemplo abaixo, reduza a largura da janela de visualização quando o inline-flex estiver ativo e ... role.

Veja a caneta Flexbox @ApeeScape - Pai - propriedade `display` por DD ( @Diegue ) em CodePen .

.wrapper inline-flex;

Direção flexível

Agora que você viu a primeira amostra, pode inferir que o comportamento padrão é simplesmente criar uma linha dos elementos. Mas tem mais:

• linha (padrão): Organiza os elementos da esquerda para a direita (mas se RTL for definido, será para trás).
• linha reversa: Inverte a ordem dos elementos em uma disposição de linha
• coluna: Organiza os elementos de cima para baixo
• coluna reversa: Reverte as ordens dos elementos em uma disposição de coluna

Dica: o column e column-reverse os valores podem ser usados ​​para trocar os eixos, de modo que as propriedades que afetariam o eixo horizontal afetariam o eixo vertical.

Veja a caneta Flexbox @ApeeScape - Pai - propriedade `flex-direction` por DD ( @Diegue ) em CodePen .

.wrapper row-reverse

Flex Wrap

Se você verificar o primeiro exemplo de código, descobrirá que os elementos filho não são empilhados por padrão em um flex wrapper. É aqui que flex-wrap entra em jogo:

• nowrap (padrão): Evita que os itens em um flex container se embrulhem
• embrulho: Agrupa itens conforme necessário em várias linhas (ou colunas, dependendo de flex-direction)
• wrap-reverse: Assim como wrap, mas o número de linhas (ou colunas) aumenta na direção oposta conforme os itens são agrupados

Veja a caneta Flexbox @ApeeScape - Pai - propriedade `flex-wrap` por DD ( @Diegue ) em CodePen .

.wrapper wrap-reverse;

Flex Flow

Você pode combinar flex-direction e flex-wrap propriedades em uma única propriedade: flex-flow.

.wrapper { flex-flow: {flex-direction} {flex-wrap}; }

Justificar conteúdo

Esta propriedade é usada para controlar o alinhamento horizontal dos elementos filhos:

• flex-start (padrão): os elementos são alinhados à esquerda (semelhante aos elementos embutidos com text-align: left)
• flex-end: Os elementos são alinhados à direita (semelhantes aos elementos embutidos com text-align: right)
• Centro: Os elementos são centralizados (semelhantes aos elementos embutidos com text-align: center)
• espaço ao redor (onde a mágica começa): Cada elemento será renderizado com a mesma quantidade de espaço ao redor de cada item. Observe que o espaço entre dois elementos filho sequenciais será o dobro do espaço entre os elementos externos e as laterais do invólucro.
• espaço entre: Assim como space-around, exceto que os elementos serão separados pela mesma distância e haverá não espaço próximo a uma das bordas da embalagem.

Nota: Lembre-se de flex-direction, quando definido como column ou column-reverse, troca o eixo. Se um deles for definido, justify-content afetará o alinhamento vertical, não horizontal.

Veja a caneta Flexbox @ApeeScape - Pai - propriedade `justify-content` por DD ( @Diegue ) em CodePen .

Alinhar itens

Esta propriedade é semelhante a justify-content mas o contexto de seus efeitos são as linhas em vez do próprio invólucro:

• flex-start: Os elementos são alinhados verticalmente na parte superior do invólucro.
• flex-end: Os elementos são alinhados verticalmente na parte inferior do invólucro.
• Centro: Os elementos são centralizados verticalmente dentro do invólucro (finalmente, uma prática segura para fazer isso).
• esticam (padrão): Força os elementos a ocuparem a altura total (quando aplicado a uma linha) e a largura total (quando aplicado a uma coluna) do wrapper.
• linha de base: Alinha verticalmente os elementos com seus reais linhas de base .

Veja a caneta Flexbox @ApeeScape - Pai - propriedade `align-items` por DD ( @Diegue ) em CodePen .

Alinhar Conteúdo

Esta propriedade é semelhante a justify-content e align-items mas funciona no eixo vertical e o contexto é o wrapper inteiro (não a linha como no exemplo anterior). Para ver seus efeitos, você precisará de mais de uma linha:

• flex-start: As linhas são alinhadas verticalmente na parte superior (ou seja, empilhadas a partir do topo da embalagem).
• flex-end: As linhas são alinhadas verticalmente na parte inferior (ou seja, empilhadas na parte inferior do invólucro).
• Centro: As linhas são centralizadas no invólucro verticalmente.
• esticam (padrão): Em geral, esta propriedade estica os elementos para utilizar toda a altura vertical do wrapper. No entanto, se você definiu alguma altura específica dos elementos, essa altura será respeitada e o espaço vertical restante (nessa linha, abaixo desse elemento) ficará vazio.
• espaço ao redor: Cada linha será renderizada com a mesma quantidade de espaço ao redor de si verticalmente (ou seja, abaixo e acima de si mesma). Observe que o espaço entre as duas linhas será, portanto, o dobro do espaço entre as linhas superior e inferior e as bordas da embalagem.
• espaço entre: Assim como space-around, exceto que os elementos serão separados pela mesma distância e não haverá espaço nas bordas superior e inferior do wrapper.

Veja a caneta Flexbox @ApeeScape - Pai - propriedade `align-content` por DD ( @Diegue ) em CodePen .

Flex Grow

Esta propriedade define a proporção relativa do espaço disponível que o elemento deve usar. O valor deve ser um número inteiro, onde 0 é o padrão.

Digamos que você tenha dois elementos diferentes no mesmo pacote flexível. Se ambos tiverem um flex-grow valor de 1, eles crescerão igualmente para compartilhar o espaço disponível. Mas se um a flex-grow valor de 1 e o outro a flex-grow valor de 2, conforme mostrado no exemplo abaixo, este com um flex-grow o valor de 2 aumentará para ocupar o dobro de espaço do primeiro.

.wrapper .elements { flex-grow: 1; /* Default 0 */ } .wrapper .elements:first-child { flex-grow: 2; }

Veja a caneta Flexbox @ApeeScape - Crianças - propriedade `flex-grow` por DD ( @Diegue ) em CodePen .

Flex Shrink

Semelhante a flex-grow, esta propriedade define se o elemento é “encolhível” ou não com um valor inteiro. Semelhante a flex-grow, flex-shrink especifica o fator de redução de um item flexível.

Veja a caneta Flexbox @ApeeScape - Crianças - propriedade `flex-shrink` por DD ( @Diegue ) em CodePen .

.wrapper .element { flex-shrink: 1; /* Default 0 */ }

Flex Basis

Esta propriedade é usada para definir o tamanho inicial de um elemento antes que o espaço disponível seja distribuído e os elementos sejam ajustados de acordo.

Dica: flex-basis não suporta calc() e box-sizing: border-box em todos os navegadores, então recomendo usar width se você precisar usar um deles (observe que você também precisará definir flex-basis: auto;).

Veja a caneta Flexbox @ApeeScape - Crianças - propriedade `flex-basis` por DD ( @Diegue ) em CodePen .

.wrapper .element

Flex

Você pode combinar flex-grow, flex-shrink e flex-basis propriedades em uma única propriedade: flex do seguinte modo:

.wrapper { flex: {flex-grow} {flex-shrink} {flex-basis}; }

Dica: se você planeja usar flex, certifique-se de definir todos os valores (mesmo se desejar usar valores padrão) porque alguns navegadores podem não reconhecê-los (um bug comum está relacionado ao não ter definido o flex-grow valor).

Alinhar-se

Esta propriedade é semelhante a align-items mas o efeito é aplicado individualmente a cada elemento. Os valores possíveis são:

• flex-start: Alinha verticalmente o elemento com a parte superior do invólucro.
• flex-end: Alinha verticalmente o elemento com a parte inferior do invólucro.
• Centro: Centraliza verticalmente o elemento dentro do invólucro (pelo menos uma maneira simples de fazer isso!).
• esticam (padrão): Estica o elemento para ocupar a altura total do invólucro (quando aplicado a uma linha) ou a largura total do invólucro (quando aplicado a uma coluna).
• linha de base: Alinha os elementos de acordo com suas linhas de base reais.

Veja a caneta Flexbox @ApeeScape - Crianças - propriedade `align-self` por DD ( @Diegue ) em CodePen .

Ordem

Uma das melhores coisas incluídas no Flexbox é a capacidade de reordenar elementos (usando a propriedade order) sem a necessidade de modificar o DOM ou usar JavaScript. A forma como o order obras de propriedade é super simples. Da mesma forma que z-index controla a ordem em que os itens são renderizados, order controla a ordem em que os elementos são posicionados dentro do invólucro; ou seja, elementos com um menor order valor (que pode até ser negativo, aliás) são posicionados antes daqueles com maior order valor.

Veja a caneta Flexbox @ApeeScape - Filhos - propriedade `ordem` por DD ( @Diegue ) em CodePen .

.wrapper .elements { order: 1; /* this one will be positioned second */ } .wrapper .elements:last-child { order: -1; /* this one will be positioned first */ }

Juntando tudo: exemplos de uso do Flexbox

Quando se trata de criar layouts, o Flexbox abre um mundo de possibilidades. Abaixo, você pode encontrar alguns exemplos de uso das propriedades do Flexbox.

Componente de Alinhamento Vertical

Com o Flexbox, você pode alinhar qualquer coisa verticalmente, incluindo vários elementos de uma vez. Sem o Flexbox, você precisava usar técnicas de posicionamento ou de mesa que exigiam que criássemos um filho para conter vários elementos. Mas com o Flexbox, você pode deixar essas técnicas tediosas e frágeis para trás e simplesmente definir algumas propriedades no invólucro e pronto, independentemente de quantas vezes o conteúdo dentro do contêiner muda ou o tipo de mudança!

.wrapper { display: flex; /* always present for Flexbox practices */ flex-direction: column; /* elements stack */ justify-content: center; /* now that flex-direction is a column, the axis are swapped so this centers the content vertically */ min-height: 100vh /* make sure wrapper is taller enough */ }

Veja a caneta Flexbox @ApeeScape - Usos reais que podemos dar - Alinhamento vertical por DD ( @Diegue ) em CodePen .

Layout meio / meio

Um layout “meio / meio” é um layout de altura total com duas colunas, cada uma com seu conteúdo centralizado verticalmente. Geralmente é implementado 'acima da dobra' (ou seja, antes que os usuários rolem para baixo após o carregamento da página).

Usando técnicas mais tradicionais, você pode criar este layout com elementos flutuantes (de largura 50% cada), limpando os flutuadores no invólucro (“clearfix” :before e :after, overflow: hidden, ou um whackywith clear: both; no final). Ainda assim, é muito trabalhoso e o resultado não é tão estável quanto o que o Flexbox oferece.

No trecho de código a seguir, você verá como é fácil definir o layout e também como os filhos se tornam também wrappers Flexbox, já que tudo está alinhado verticalmente também.

Wrapper externo:

.wrapper { display: flex; flex-direction: column; /* only for mobile */ }

Wrappers internos:

.inner-wrapper { flex-grow: 1; /* Allow the element to grow if there is available space */ flex-shrink: 1; /* Elements shrink at the same rate */ flex-basis: 100%; /* Elements will cover the same amount, if is possible the 100% of the width */ }

Veja a caneta Flexbox @ApeeScape - Usos reais que podemos dar - Seção de meio sangramento por DD ( @Diegue ) em CodePen .

Botões da barra de navegação de largura total

Uma barra de navegação de largura total distribui o espaço igualmente na mesma linha de itens da barra de navegação, independentemente do número de elementos.

No exemplo abaixo, também existem alguns botões icônicos sem esse comportamento, demonstrando que você pode combinar os dois da maneira que quiser. Sem o Flexbox, atingir esses tipos de layouts exigiria código JavaScript para calcular o espaço disponível e, em seguida, distribuí-lo programaticamente, dependendo de quais botões abrangem e quais não.

O Flexbox torna isso muito mais simples.

Propriedades do invólucro:

.navbar { display: flex; }

Abrangendo propriedades filho:

.navbar-item { flex-grow: 1; /* They will grow */ }

Propriedades filho não abrangentes:

.navbar-other { flex-grow: 0; // They won’t grow }

Veja a caneta Flexbox @ApeeScape - Usos reais que podemos oferecer - Barra de navegação de botões sem margens por DD ( @Diegue ) em CodePen .

Blurbs

Quantas vezes você teve que implementar um conjunto de caixas de informações com ícones e texto em diferentes projetos?

Essa distribuição de elementos é principalmente útil em marketing digital, mas pode ter alguns outros usos no desenvolvimento de software. Com o poder do Flexbox, você pode definir uma espécie de grade e também alinhar elementos, independentemente de quantos existem.

Propriedades do invólucro:

.wrapper { display: flex; flex-wrap: wrap; }

Propriedades filho:

.blurb { flex-grow: 0; /* elements don’t grow */ flex-shrink: 0; /* elements don’t shrink in a flexible way */ flex-basis: auto; /* the width of the elements will be set by proportions in `width` due to flex-basis not support workaround */ width: calc(33.33% - 60px); /* calculate proportional width without space taken by padding (workaround for IE 11) */ }

Para telas de tablet e celular, a largura varia entre 50% e 100%.

Veja a caneta Flexbox @ApeeScape - Usos reais que podemos dar - Blurbs por DD ( @Diegue ) em CodePen .

Melhorar a compatibilidade entre navegadores

A sintaxe do Flexbox mudou inúmeras vezes nas diferentes versões do navegador. Isso pode ser um problema ao implementar um layout com Flexbox e tentar oferecer suporte a navegadores da web mais antigos, especialmente versões mais antigas do Internet Explorer.

Felizmente, muitas técnicas e soluções alternativas para fazer seu código funcionar na mais ampla gama de navegadores da web estão listadas em Flexbugs , que é um ótimo recurso. Se você seguir as informações desse site, terá resultados melhores e consistentes em diferentes navegadores da web.

Tarefas de prefixo são particularmente úteis nesse sentido. Para automatizar a prefixação de regras CSS, você pode escolher uma das seguintes ferramentas:

Rubi:

• Autoprefix Rails
• Middleman Autoprefixer

Node.js:

• PostCSS Autoprefixer
• Grunt Autoprefixer
• Gulp Autoprefixer

Comece a construir layouts inteligentes

Flexbox é uma ótima ferramenta para acelerar, aperfeiçoar e dimensionar nosso trabalho. O limite está apenas na imaginação do desenvolvedor.

Se precisar de ajuda visual para planejar seu próximo layout, você pode tentar este playground bacana:

Veja a caneta Flexbox @ApeeScape - Flexbox playground por DD ( @Diegue ) em CodePen .

Abra-o em um nova janela .

Com a crescente adoção de navegadores da web modernos pela maioria dos usuários, o uso do Flexbox permitirá que você crie layouts incríveis facilmente, sem a necessidade de mergulhar em código JavaScript confuso ou criar CSS desordenado.