Flexbox em CSS & HTML (Tutorial) - desenvolvendo layouts responsivos

Isso é o que você pode esperar no curso sobre Flexbox em CSS e HTML.

O que é o layout Flexbox e por que é que se deve usar?

Aqui será iniciado o projeto, no qual então será trabalhado posteriormente.

Apresento aqui a estrutura de exemplo e as opções de depuração integradas no VS Code com as ferramentas do MS Edge. Além disso, neste vídeo será ativado pela primeira vez o layout Flexbox e a direção será definida.

Como dividir o espaço uniformemente ou em proporções específicas no layout de Flexbox?

Um pequeno exercício em que não se pode escapar de um pouco de matemática simples.

Aqui apresento um layout horizontal com duas barras laterais que se ajusta responsivamente à largura.

Elementos filhos podem ser alinhados ao longo do eixo transversal do contêiner flexível. Aqui eu mostro como isso pode ser configurado.

Não apenas no contêiner é possível ajustar o alinhamento de todos os elementos filhos, com align-self também é possível ajustar de forma diferente nos elementos individuais.

Um pequeno exercício de alinhamento individual com um cubo.

Não só ao longo do eixo transversal pode ser alinhado em um contêiner flexível, também é possível alinhar muitas coisas no alinhamento ao longo do eixo principal. ;-)

Um pequeno exemplo de como alinhar ao longo do eixo principal em um layout comum pode ser muito útil.

Para ser flexível, é preciso ser capaz de especificar o tamanho dos elementos filhos independentemente da largura ou altura concreta. Felizmente, existe a propriedade flex-basis-, com a qual é possível fazer exatamente isso. Ao alterar a flex-direction, a largura se torna altura e vice-versa. 

Em quanto um elemento deve crescer quando houver mais espaço disponível do que o flex-basis estabelece? Isso pode ser ajustado com o flex-grow.

Em quanto deve um elemento encolher quando há menos espaço do que o especificado pelo flex-basis? Isso pode ser ajustado especificamente com flex-shrink. 

Elementos filhos não só podem encolher quando há menos espaço disponível, mas também podem quebrar do contêiner. Como controlar isso com flex-wrap, eu mostro neste vídeo.

flex-direction e flex-wrap podem ser combinados na propriedade flex-flow. Isso até faz sentido, mesmo se só quisermos definir flex-direction, já que flex-flow é mais curto. ;-)

Uma tarefa para flex-wrap.

Às vezes, é necessário ter espaço para não tornar desnecessariamente desconfortável para o olho humano. Felizmente, existe a propriedade CSS gap, que faz exatamente isso com os elementos filhos de um contêiner flexível.

A ordem deve ser mantida, especialmente em interfaces da web, pois estas devem ser fáceis de usar. Às vezes, a ordem também precisa ser definida de forma personalizada, sem mover elementos no DOM. Para isso, a propriedade CSS order é muito útil, pois permite alterar facilmente a ordem visível dos elementos.

Vamos testar se você entendeu a ordem correta. Aqui, até há uma segunda maneira de obter o mesmo resultado, mas tenho certeza de que você também vai perceber isso.

Muitas vezes acontece que se deseja centralizar elementos e, principalmente, texto horizontal e verticalmente (!). O que era uma luta antes do Flexbox é agora uma brincadeira de criança com o Flexbox.

Quem não conhece, o triplo divisor? Se ele ainda se ajusta ao espaço disponível, não falta muito para o design responsivo.

Existem sites sem formulários? Se sim, então não são muitos. Por isso, é muito importante organizá-los de forma atraente, o que felizmente não é um problema com Flexbox.

Muitas vezes, nos deparamos com layouts complexos, mas com o layout flexível, até esses não representam mais um grande desafio.

Neste momento, existem clientes de chat na web como areia no mar e com os chatbots de IA, surgiram ainda mais. Mas como pode-se implementar um chat com Flexbox? Eu mostro isso neste vídeo.

Desde o Web 2.0, quase todos os sites possuem uma galeria. Neste vídeo, descrevo como um layout desse tipo poderia ser implementado maravilhosamente com Flexbox.

Agora tudo deveria estar claro em relação ao layout flexível. Para finalizar, descreverei o que vocês deveriam ter aprendido, o que ainda podem fazer e quais são as outras belas possibilidades de layout com CSS.