CSS Flexbox - Flexible Box Layout

Name: CSS Flexbox - Flexible Box Layout
Rating: 4.8 (298 reviews)

Domine de uma vez por todas a criação de layouts responsivos para diferentes tamanhos de telas com Flexbox.

Highest Rated

Created byArgus Academy, Jorge Sant Ana

Last updated 12/2025

Portuguese

What you'll learn

Em quais contextos utilizar o Flexbox.
Utilizar o Flexbox para criação de interfaces responsivas.
Dominar o conceito e a técnica de por trás dos Flex Containers.
Dominar o conceito e a técnica de por trás dos Flex Items.

Course content

5 sections • 40 lectures • 4h 14m total length

Apostila do curso0:05
Canais de comunicação0:05
Diferença entre Flexbox e CSS Grid6:42
Entender a diferença, as vantagens e desvantagens entre Flexbox e CSS Grid.
CSS Grid - Quando usar?1:27
Entender, tecnicamente, quando utilizar o CSS Grid.
CSS Flexblox - Quando usar?3:25
Entender, tecnicamente, quando utilizar o Flexbox.
Combinando CSS Grid e Flexbox4:58
Combinar as tecnologias CSS Grid e Flexbox para criar templates (layouts responsivos + ui components responsivos).
Preparando o ambiente de trabalho3:34
Configurando o VSCode com as extensões HTML Preview e HTML Boilerplate.

Display Block4:09
Compreender o comportamento dos elementos de nível de bloco (display: block).
Display Flex3:04
Compreender o comportamento do display flex que transforma um elemento HTML em um Flex Container e seus elementos filhos em Flex Items.
Flex-direction (row, row-reverse, column, column-reverse)9:32
Utilizar o flex-direction e seus atributos row, row-reverse, column e column-reverse para determinar o eixo principal (main axis) e a direção dos Flex Items dentro do Flex Container.
Flex-wrap (nowrap, wrap e wrap-reverse) com flex-direction row8:52
Transformar o Flex Container em multilinha para evitar o overflow de Flex Items na direção row quando o main size for superado.
Flex-wrap (nowrap, wrap e wrap-reverse) com flex-direction column7:28
Transformar o Flex Container em multicoluna para evitar o overflow de Flex Items na direção column quando o main size for superado.
Flex-flow (syntax sugar do flex-wrap e flex-direction)7:52
Combinando o flex-direction e flex-wrap na syntaxe sugar flex-flow.
Justify-content parte 1 - Flex-start, flex-end e center11:26
Alinhar Flex Items dentro do Flex Container de acordo com o eixo principal (main axis).
Justify-content parte 2 - Space-between, space-round e space-evenly11:21
Alinhar Flex Items dentro do Flex Container de acordo com o eixo principal (main axis).
Align-items parte 1 - Stretch10:05
Alinhamento dos Flex Items em linhas e colunas com base no eixo transversal (cross axis).
Align-items parte 2 - Flex-start5:40
Alinhamento dos Flex Items em linhas e colunas com base no eixo transversal (cross axis).
Align-items parte 3 - Center3:00
Alinhamento dos Flex Items em linhas e colunas com base no eixo transversal (cross axis).
Align-items parte 4 - Flex-end4:02
Alinhamento dos Flex Items em linhas e colunas com base no eixo transversal (cross axis).
Align-items parte 5 - Baseline7:11
Alinhamento dos Flex Items em linhas e colunas com base no eixo transversal (cross axis).
Align-content parte 1 - Stretch5:24
Alinhar Flex Items dentro do Flex Container de acordo com o eixo transversal (cross axis).
Align-content parte 2 - Flex-start4:38
Alinhar Flex Items dentro do Flex Container de acordo com o eixo transversal (cross axis).
Align-content parte 3 - Center3:07
Alinhar Flex Items dentro do Flex Container de acordo com o eixo transversal (cross axis).
Align-content parte 4 - Flex-end5:41
Alinhar Flex Items dentro do Flex Container de acordo com o eixo transversal (cross axis).
Align-content parte 5 - Space-between6:39
Alinhar Flex Items dentro do Flex Container de acordo com o eixo transversal (cross axis).
Align-content parte 6 - Space-around4:53
Alinhar Flex Items dentro do Flex Container de acordo com o eixo transversal (cross axis).
Align-content parte 7 - space-evenly3:23
Alinhar flex items dentro do Flex Container de acordo com o eixo transversal (cross axis).

Order6:53
Definira ordem de exibição dos Flex Items nas linhas e colunas.
Align-self8:53
Alinhando Flex Items em linhas e colunas sobrepondo a configuração de align-items do Flex Container.
Flex-grow12:30
Distribuindo os espaços disponíveis em linhas e colunas entre os Flex Items.
Flex-shrink13:36
Encolhendo Flex Items de acordo com os espaços excedentes em linhas e colunas.
Flex-basis9:09
Definir corretamente o tamanho principal inicial de um Flex Item (largura na direção de linha e altura na direção de coluna).
Flex (syntax sugar do flex-grow, flex-shrink e flex-basis)4:34
Combinando o flex-grow, flex-shrink e flex-basis na syntaxe sugar flex.

Requirements

Conhecimentos básicos em HTML5 e CSS3.

Description

O curso "Flexbox - Flexible Box Layout" da Argus Academy é um guia de bolso para qualquer programador front-end.

Neste curso você encontrará tudo o que é necessário para criação de interfaces digitais responsivas utilizando a tecnologia Flexbox (Flexible Box Layout).

Então me diz ai, que tal dominar a tecnologia que permite criar interfaces digitais responsivas? Aquelas interfaces que se adaptam aos mais variados tamanhos de telas? Curtiu?

Este é um curso incrível, com muita didática, prática e profundidade.

O curso possui 39 aulas totalizando mais de 4 horas de vídeoaulas. Você terá acesso a materiais exclusivos como a apostila do curso e os fontes dos projetos desenvolvidos nas aulas. Além disso você ainda contará com o suporte da Argus Academy para tirar suas dúvidas.

Para dominar os conteúdos apresentados no curso é necessário que você possua conhecimentos prévios em HTML5 e CSS3.

Os principais tópicos abordados no curso são:

Diferença entre Flexbox e CSS Grid.
Flex Containers: Display flex, flex-direction, flex-wrap, flex-flow, justify-content, align-items, align-content.
Flex items: Order, align-self, flex-grow, flex-shrink, flex-basis, flex.
Projeto prático: Um projeto baseado na seção de introdução do website HBOmax (adicione mai este ao seu portfólio).

E ai, está pronto(a) para encarar o desafio? Junte-se comigo nessa jornada de aprendizado.

Matricule-se agora mesmo.

Who this course is for:

Programadores front-end interessados em dominar a tecnologia Flexbox para criação de interfaces responsivas.

CSS Flexbox - Flexible Box Layout

What you'll learn

Explore related topics

Course content

Introdução7 lectures • 20min

Flex Container20 lectures • 2hr 7min

Flex Items6 lectures • 56min

Projeto prático HBOmax6 lectures • 51min

Conclusão1 lecture • 1min

Requirements

Description

Who this course is for: