CSS: Flexbox

O próximo passo no seu aprendizado do CSS é entender o CSS Flexbox. Este curso visa ensinar as principais propriedades e técnicas do Flexbox para a criação de páginas web com layouts flexíveis e modernos.

Nesta aula conheceremos o que é o CSS Flexbox e como podemos utilizá-lo para posicionar de forma simples os elementos de uma página.

O display: flex é a forma mais simples de uso da técnica Flexbox. Veremos também uma revisão dos conceitos já aprendidos em cursos anteriores sobre o uso da propriedade display. Nesta aula conheceremos as primeiras propriedades do Flexbox e como elas podem definir o posicionamento de elementos.

Nesta aula conheceremos mais duas propriedades do Flexbox, o flex-wrap e o flex-flow. Veremos também como essas propriedades podem ser utilizadas para gerar quebras de linha e definir o posicionamento de elementos HTML.

Na técnica Flexbox, o uso do justify-content é a principal forma de definir o alinhamento e o espaçamento entre os elementos de um container. Nesta aula o conheceremos e como ela pode ser utilizada para definir espaços e posicionamento de elementos HTML.

Com align-items podemos centralizar os cards no container. Ou então posicioná-los no topo ou no rodapé da seção em que estão contidos. Podemos também utilizar o valor stretch para fazer com que os cards ocupem toda a área disponível.

Nesta aula conheceremos mais quatro propriedades do Flexbox, o flex-grow, o flex-shrink, o flex-basis e o flex. Veremos como elas podem ser utilizadas para definir o tamanho e proporção dos elementos filhos de um container.

Nesta aula colocaremos em prática todo o conhecimento adquirido até aqui sobre a ferramenta Flexbox. Veremos o primeiro exemplo prático em que utilizamos os conceitos e propriedades do Flexbox para posicionar elementos. Neste exemplo posicionaremos os cards de uma página de cursos.

Nesta aula veremos o segundo exemplo prático em que utilizamos o Flexbox para posicionar elementos. Nesta aula posicionaremos cards de um site de lanchonete.

Nesta aula veremos o terceiro exemplo prático em que utilizamos o Flexbox para posicionar elementos. Nesta aula posicionaremos o topo de um site de hospedagem.