Flexbox – O que é e como usar
CSS Flexible Box layout, comumente conhecido como flexbox, é um modelo de layout Web CSS3. Está no estágio da recomendação do candidato W3C (CR). o Flexbox permite que elementos responsivos dentro de um contêiner sejam organizados automaticamente dependendo do tamanho da tela (ou do dispositivo).
A maioria das páginas da Web são escritas em uma combinação de HTML (Hypertext Markup Language) e CSS (Cascading Style Sheets). Em suma, o HTML especifica o conteúdo e a estrutura lógica da página, enquanto o CSS especifica como ele se parece: suas cores, fontes, formatação, layout e estilo.
CSS Flex-box layout é uma maneira particular de especificar o layout de páginas HTML.
Uma das características mais definidoras do layout Flex é a sua capacidade de formar-Fit, com base em seu ambiente de visualização. As caixas Flex podem ajustar em tamanho — diminuindo, para evitar o espaço desnecessariamente monopolizando, ou aumentando para que o conteúdo seja restringido dentro dos limites. Além disso, o layout Flex é menos restritivo em termos de fluxo de conteúdo do que aqueles, por exemplo, do bloco e tipos de exibição in-line, que geralmente são uni-direcionais. Na verdade, não só pode Flex fluxo direcional ser especificado, no nível de estilo, como rightwards, leftwards, para cima, ou para baixo; itens individuais dentro de um contêiner Flex também podem ser automaticamente reordenados e reorganizados para se adequar ao espaço de layout disponível.
Na década de 2000, o uso intensivo da Web por agentes móveis motivados “layouts líquidos ” e elementos responsivos para a crescente variedade de tamanhos de tela. Nos 2010s, o uso intensivo de frameworks de layout JavaScript populares, como Bootstrap, inspirou CSS Flex-box e especificações de layout de grade.
CSS 3 módulos incluídos soluções semelhantes a este, como flexbox e Grid.