Curso de CSS Flexbox (2022)

Compreendendo melhor o Flexbox.

Avaliação: 4.6 de 515 avaliações

1 hora total

6 palestras

Todos os níveis

Compreendendo melhor o Flexbox.

AVISO SOBRE A DESCRIÇÃO DO CURSO

Uma descrição de curso deve conter pelo menos 200 palavras. É difícil de escrever, especialmente para um curso gratuito (que não pode exceder 2 horas de vídeo no total). Devido a algumas pessoas não acharem profissional, tive que explicar isso. Eu poderia explicar o que você pode esperar do curso em algumas frases, mas como mencionei, não está disponível. Sinta-se à vontade para pular a leitura da descrição do curso, se desejar.

Este curso irá ensinar a maneira mais fácil de dominar os fundamentos do flexbox. Você descobrirá a diferença entre bloco, inline, contêiner flex e itens flex. Como funciona o eixo principal e o eixo cruzado, e como podemos alterá-los para qualquer finalidade. Como funciona o display? Como funciona o justify-content? Como funciona o align-items? Como funciona o align-content? Como funciona o flex-direction? Como funciona o flex-wrap? Como funciona o flex-grow? Como funciona o flex-shrink? Como funciona o flex-basis? Como funciona o flex? Como funciona o order? Como funciona o align-self? Como funciona o flex-flow? O que é o eixo principal? O que é o eixo cruzado? Como você pode alterá-los? Como você pode ter controle depois de alterá-los? Aqui está tudo o que você precisa!

Sem o Flexbox: Difícil de manter seus layouts, modelos de caixa, align-items, espaço livre, etc. Você terá que usar constantemente propriedades como float, propriedades posicionais, alturas fixas e outros truques para conseguir realizar tarefas simples. Com o Flexbox, ele remove a complexidade que tínhamos antes! Fácil de manter e realizar quase qualquer layout que você desejar (para layouts 2D, o GRID é mais preferido). Oferece ferramentas extremamente poderosas! Mantenha as coisas fáceis. Esta é a lista de propriedades para que você possa ver o que pode esperar aprender neste curso gratuito!

CONTÊINER FLEX: display, justify-content, align-items, align-content, flex-direction, flex-wrap, flex-flow*, row-gap, column-gap, gap*

ITEM FLEX: flex-grow, flex-shrink, flex-basis, flex*, order, align-self

Espero que você aprenda coisas valiosas enquanto as aproveita gratuitamente :)

O que você aprenderá

nan