Curso de CSS Flex Box + Projeto

O CSS Flexible Box Layout Model ou simplesmente Flexbox faz parte da especificação do CSS3 que promete organizar elementos na página previsivelmente quando o layout precisa ser visualizado em diversos tamanhos de tela e em diversos dispositivos.

O Flexbox nos ajuda a organizar esses elementos sem a ajuda do float e também nos ajudam a sanar problemas de Box Model que normalmente acontecem quando acrescentamos, padding, margin e border além da largura do elemento.

A ideia é simples: os filhos de um elemento com flexbox pode se posicionar em qualquer direção e pode ter dimensões flexíveis para se adaptar. Você pode posicionar os diversos elementos independente da sua posição na estrutura do HTML, o que é muito bom. Um dos problemas do float a sua dependência com os elementos na estrutura do HTML. Estes elementos precisam estar em uma ordem específica, se não o layout não dá certo. Com o Flexbox essa ordem não importa, isso quer dizer que você pode organizar a informação do seu HTML de beneficiando o SEO e Acessibilidade. O código da estruturação destes elementos fica mais simples e fácil de manter.