Muitos desenvolvedores estão familiarizados com os truques com CSS floats e clearfixes para criar layouts de várias colunas. Esses truques ainda estão em uso hoje, pois funcionam e são amplamente suportados em uma infinidade de navegadores. No entanto, em 2009, um novo estilo de exibição chamado flex apareceu no mapa.
Desde então, o flex passou por diversas mudanças até chegar à sua iteração atual. O valor flex é uma alternativa para bloquear elementos flutuantes e manipulados usando media-queries. Por causa disso, os desenvolvedores podem criar contêineres flexíveis, ou seja, Flexbox para abreviar. É ótimo para telas móveis e conteúdo responsivo para web designs e aplicativos dinâmicos.
Projetar com contêineres flexíveis é uma maneira de usar a propriedade de exibição CSS de uma maneira totalmente nova. Os elementos de bloco são empilhados verticalmente, enquanto os elementos embutidos são empilhados horizontalmente (até quebrarem em uma nova linha).
Os elementos FlexBox podem empilhar verticalmente ou horizontalmente com base em sua configuração. Eles podem ser espaçados uniformemente na página ou espremidos e pressionados um contra o outro. O ponto crucial é fornecer maior controle aos desenvolvedores que desejam criar layouts naturalmente responsivos.
Qualquer elemento referenciado como Flexbox é um elemento container. Este contêiner conterá elementos dentro, conhecidos como itens FlexBox. Se você quiser mais detalhes sobre isso, recomendo que leia a primeira parte deste artigo do Mozilla Dev.
O container display:flex pode ter uma largura fixa ou fluida, mas é melhor deixá-lo como fluido, para que o conteúdo se adapte à página. Os elementos internos não terão valores de largura específicos, mas serão exibidos com base nas proporções. Você pode usar a propriedade CSS chamada flex para definir um raio entre os contêineres (principalmente divs HTML). Flex:1 representa um raio de 1:1 onde cada elemento flexível interno é exibido com a mesma largura com base na resolução da tela.
Exemplo de Flexbox Responsivo 1
. flex-container {
display : flex ;
flex-direction : row ;
}
/* Layout responsivo - cria um layout de uma coluna em vez de um layout de duas colunas */
@ media (max-width: 800px) {
. flex-container {
flex-direction : coluna ;
}
}
Exemplo de Flexbox Responsivo 2
. flex-container {
display : flex ;
flex- wrap : wrap ;
}
. flex-item-esquerda {
flex : 50 % ;
}
. flex-item-direito {
flex : 50 % ;
}
/* Layout responsivo - cria um layout de uma coluna em vez de um layout de duas colunas */
@ media (max-width: 800px) {
. flex-item-right , . flex-item-esquerda {
flex : 100 % ;
}
}
Exemplos de formulários Flexbox responsivos