CSS Flexbox - Um Guia Interativo (Parte 1 - Containers) \| TreinaWeb Promoção no ar Matricule-se agora e garanta **54% de desconto** Termina em Tempo restante da oferta: 03 Horas 43 Min 38 Seg Tempo restante da oferta: 03 43 38 [Assinar →](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Explorar [ Quanto custa? ](#assinatura) [ FAQ ](https://www.treinaweb.com.br#faq) [Matricule-se](#assinatura) [ Entrar ](https://www.treinaweb.com.br/login) [ Início ](https://www.treinaweb.com.br) [ Artigos ](https://www.treinaweb.com.br/blog) CSS Flexbox - Um Guia Interativo (Parte 1 - Containers) [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) # CSS Flexbox - Um Guia Interativo (Parte 1 - Containers) Aprenda a trabalhar com o CSS Flexbox com este guia definitivo e interativo! Vamos ver primeiro as propriedades dos containers. [ Akira Hanashiro ](https://www.treinaweb.com.br/blog/autor/akira-hanashiro) 8 anos atrás ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/03/01152250/ALINHAMENTO-1.png) Olá Web Developers! Há um bom tempo que os navegadores já suportam bem o `Flexbox`. Porém, ainda há pessoas com algumas dúvidas sobre o seu funcionamento. Por isso desenvolvi um guia interativo para te ajudar a entender como o `Flexbox` funciona. [ ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/10/E-BOOK-GRATUITO-HTML.jpg) ](https://www.treinaweb.com.br/ebook/guia-HTML/) Se estiver com dúvidas entre usar **Flexbox** ou **CSS Grid**, confira o nosso post de comparação: [https://www.treinaweb.com.br/blog/flexbox-ou-css-grid/](https://www.treinaweb.com.br/blog/flexbox-ou-css-grid/ "https://www.treinaweb.com.br/blog/flexbox-ou-css-grid/") [ ![Design Thinking](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/design-thinking.svg) Curso Design Thinking Conhecer o curso ](https://www.treinaweb.com.br/curso/design-thinking) ## O que é Flexbox? O `Flexbox` (Flexible Box) nos permite organizar, alinhar e distribuir itens dentro de um container. Com ele fica mais simples definir o tamanho e o alinhamento vertical e horizontal de itens. Primeiro de tudo temos que saber que teremos propriedades CSS para trabalhar com o elemento que possui nossos itens (container ou elemento pai) e propriedades para os nossos itens (elementos filhos). ![](https://dkrn4sk0rn31v.cloudfront.net/2019/02/25075233/flexbox-item-container.png) ## Container Neste primeiro post veremos as propriedades que ficam no elemento pai dos nossos itens, o container. Teremos basicamente um container com três itens dentro. ```html ``` ### display Primeiro precisamos definir que o nosso container é do tipo “flex”; Fazemos isso com a propriedade “display”. No exemplo abaixo, utilize o `checkbox` para ligar/desligar o `Flexbox`. ### flex-direction Indica a direção dos itens, definindo o que vamos chamar de `eixo principal` (*main-axis*). - **row** (padrão): da esquerda para direita - **row-reverse:** inverso de `row` - **column:** de cima para baixo - **column-reverse:** inverso de `column` ### flex-wrap O comportamento padrão dos itens de um elemento flex é ficar em uma única linha. Se a largura total de todos os itens for maior do que o espaço disponível, os itens continuarão na mesma linha. Esta propriedade permite que os itens sejam jogados em outra linha caso não haja mais espaço na linha. - **nowrap** (padrão): todos os itens ficam em uma única linha - **wrap:** os itens que não cabem na linha são jogados para baixo - **wrap-reverse:** os itens que não cabem na linha são jogados para cima ### flex-flow Esta propriedade é apenas um atalho para `flex-direction` e `flex-wrap`, nos permitindo declarar o valor de ambos em uma única propriedade. ```css .container{ display: flex; flex-flow: row wrap; } ``` ### justify-content Define o alinhamento dos itens ao longo do `eixo principal`. - **flex-start** (padrão): os itens ficam junto no começo da linha - **flex-end:** os itens ficam juntos no final da linha - **center:** os itens ficam centralizados na linha - **space-between:** os itens são distribuídos igualmente no espaço disponível. O primeiro item fica no começo da linha e o último fica no final. - **space-around:** os itens são distribuídos igualmente no espaço disponível ao redor deles. - **space-evenly:** os itens são distribuídos igualmente no espaço disponível. **flex-direction: column** Lembre-se que esta propriedade alinha os itens em relação ao `eixo principal`. Isso significa que se você mudar o valor de `flex-direction`, a direção do posicionamento será outra. ### align-items Define o alinhamento dos itens perpendicularmente em relação ao `eixo principal`. Pense nele como um `justify-content`, mas que alinhará os itens no outro eixo. - **stretch** (padrão): estica os elementos para preencherem o container. - **flex-start:** os itens ficam junto no começo do eixo perpendicular - **flex-end:** os itens ficam juntos no final do eixo perpendicular - **center:** os itens ficam centralizados no eixo perpendicular - **baseline:** parecido com o `center`, mas usando a base da linha como referência. No exemplo abaixo, note como os textos dos itens ficam alinhados. **flex-direction: column** Lembre-se que esta propriedade alinha os itens em relação ao `eixo principal`. Isso significa que se você mudar o valor de `flex-direction`, a direção do posicionamento será outra. ### align-content Alinha as linhas do container. Por alinhar as linhas, esta propriedade só tem efeito quando há mais de uma linha. - **stretch** (padrão): estica as linhas para preencherem o espaço restante. - **flex-start:** as linhas ficam juntas no começo do container - **flex-end:** as linhas ficam juntas no final do container - **center:** as linhas ficam centralizadas no container - **space-between:** as linhas são distribuídas igualmente. A primeira linha fica no começo do container e a última fica no final. - **space-around:** as linhas são distribuídas igualmente no espaço disponível ao redor delas. **flex-direction: column** Lembre-se que esta propriedade alinha os itens em relação ao `eixo principal`. Isso significa que se você mudar o valor de `flex-direction`, a direção do posicionamento será outra. [ ![Scrum - Planejamento e Desenvolvimento Ágeis](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/scrum.svg) Curso Scrum - Planejamento e Desenvolvimento Ágeis Conhecer o curso ](https://www.treinaweb.com.br/curso/scrum-planejamento-e-desenvolvimento-ageis) ## Playground Para testar, brinque um pouco com cada uma das propriedades para ver as possibilidades: - [ #CSS ](https://www.treinaweb.com.br/blog/tag/css) - [ #HTML5 ](https://www.treinaweb.com.br/blog/tag/html5) - [ #layout ](https://www.treinaweb.com.br/blog/tag/layout) - [ #Flexbox ](https://www.treinaweb.com.br/blog/tag/flexbox) Autor ![Akira Hanashiro](//secure.gravatar.com/avatar/d107ca73135bc62770a67ebbfe4cf80d?d=mm) ## Akira Hanashiro Graduado em Análise e Desenvolvimento de Sistemas, Pós-graduado em Projetos e Desenvolvimento de Aplicações Web e MBA em Machine Learning. Especializado em Front End e curte desenvolvimento de jogos. [Todos os artigos](https://www.treinaweb.com.br/blog/autor/akira-hanashiro) ## Continue estudando Transforme leitura em prática com os cursos e formações da TreinaWeb. [Ver cursos](https://www.treinaweb.com.br/cursos) Continue lendo ## Artigos relacionados - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/06/GUIA-CSS-400x280.jpg) [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) 3 anos atrás ## [ Guia da linguagem CSS ](https://www.treinaweb.com.br/blog/guia-da-linguagem-css) Nesse guia completo veremos como funciona e quais as formas de criar estilizações com CSS, necessário para qualquer desenvolvedor front-end Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/04/01182054/0-400x280.png) [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) 8 anos atrás ## [ CSS Grid – Um Guia Interativo (Parte 1 – Containers) ](https://www.treinaweb.com.br/blog/css-grid-um-guia-interativo-parte-1-containers) Aprenda definitivamente a trabalhar com CSS Grid com este Guia Interativo para facilitar o seu trabalho na construção de layouts com CSS. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/02/01152334/container-1-400x280.png) [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) 8 anos atrás ## [ CSS Flexbox - Um Guia Interativo (Parte 2 - Itens) ](https://www.treinaweb.com.br/blog/css-flexbox-um-guia-interativo-parte-2-itens) Aprenda a trabalhar com o CSS Flexbox com este guia definitivo e interativo! Vamos ver as propriedades dos itens. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2018/02/06152104/flex-grid-400x280.png) [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) 9 anos atrás ## [ FlexBox ou CSS Grid? ](https://www.treinaweb.com.br/blog/flexbox-ou-css-grid) Houve um tempo em que posicionar elementos pelo CSS poderia ser trabalhoso, dependendo do que fosse preciso criar. Temos duas especificações que resolvem esses problemas: FlexBox e CSS Grid. Você sabe quando usar uma ou outra? Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/01/07101943/Aspect-Ratio-400x280.png) [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) 7 anos atrás ## [ CSS - Altura automática proporcional à largura sem JavaScript ](https://www.treinaweb.com.br/blog/css-altura-automatica-proporcional-a-largura-sem-javascript) Aprenda a definir elementos com dimensões proporcionais com CSS sem nenhuma linha de JavaScript. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/05/float-css-400x280.png) [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) 10 anos atrás ## [ CSS: Float vs Inline Block - Qual usar em meus layouts? ](https://www.treinaweb.com.br/blog/css-float-vs-inline-block-qual-usar-em-meus-layouts) Você sabe quando utilizar "float" e "display: inline-block"? Veja as características de cada um e aprenda a aplicá-los em seus projetos. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/09/criando-a-estrutura-de-um-layout-com-css-grid-e-flexbox.png-400x280.png) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 5 anos atrás ## [ Criando a estrutura de um Layout com CSS Grid e Flexbox ](https://www.treinaweb.com.br/blog/criando-a-estrutura-de-um-layout-com-css-grid-e-flexbox) Nesse artigo vamos aprender sobre as funcionalidades CSS Grid e FlexBox do CSS na pratica durante o desenvolvimento de layout. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/08/seletores_avancados_do_css-400x280.png) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 4 anos atrás ## [ Seletores avançados do CSS ](https://www.treinaweb.com.br/blog/seletores-avancados-do-css) Nesse artigo você irá entender alguns tipos de seletores pouco utilizados no CSS, porém extremamente úteis no desenvolvimento front-end. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/05/GUIA-HTML-400x280.jpg) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 4 anos atrás ## [ Guia da linguagem HTML ](https://www.treinaweb.com.br/blog/guia-da-linguagem-html) Esse guia é perfeito pra você que está começando ou quer entender melhor como podemos trabalhar com a linguagem HTML . Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/01/atributos-html-400x280.jpg) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 4 anos atrás ## [ Entendendo os atributos HTML ](https://www.treinaweb.com.br/blog/entendendo-os-atributos-html) No artigo de hoje, veremos algo que está muito presente no mundo da programação, atributos. Por que são tão importantes para o Front-End? Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/09/pixel_fisico_pixel_css-400x280.jpg) [ Sem categoria ](https://www.treinaweb.com.br/blog/categoria/sem-categoria) 4 anos atrás ## [ Pixel físico e pixel CSS ](https://www.treinaweb.com.br/blog/pixel-fisico-e-pixel-css) Nesse artigo você irá entender ao certo, a diferença entre esses dois tipos de pixels, e o que isso impacta no desenvolvimento Front end. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/09/POSITIONS-CSS-400x280.jpg) [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) 4 anos atrás ## [ Position, estilizando elementos com CSS. ](https://www.treinaweb.com.br/blog/position-estilizando-elementos-com-css) Neste artigo nos iremos aprender sobre position em elementos no CSS, e sua importância para estilizações das nossas páginas web. Ler artigo ## Um ano de acesso total para você viver de programação. Todos os cursos e formações da TreinaWeb numa única assinatura, com professores que atuam no mercado, suporte direto e certificados. Do primeiro `console.log` ao mercado de trabalho. - **1 ano** de acesso a **todos os cursos** - Cursos novos **toda semana** - Suporte **direto com professores** - Plano de carreira **personalizado** - **Certificados digitais** inclusos - **Aplicativos** para Android e iOS, com **acesso offline** **Garantia incondicional de satisfação** Teste por 7 dias e, se não fizer sentido para você, devolvemos seu dinheiro. ### Acesso completo a todos os cursos e dezenas de Formações. 12 meses Economize R$ 840,00 54% OFF de 12x R$ 129,00 por apenas 12x R$ 59,00 sem juros no cartão de crédito ou R$ 599,00 à vista Oferta termina em **03h 43min 38s** - Acesso imediato e ilimitado durante 1 ano. - Plano de carreira personalizado. - Suporte direto com professores. - E muito mais! [Matricule-se agora](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Escola online de programação, tecnologia e IA. - [ ](https://www.facebook.com/TreinaWeb/) - [ ](https://www.instagram.com/treinaweb/) - [ ](https://www.youtube.com/user/TreinaWeb) - [ ](https://twitter.com/treinaweb) - [ ](https://www.linkedin.com/company/treinaweb) - [ ](https://github.com/treinaweb) ## Inscreva-se em nossa newsletter Receba lançamentos, promoções e novidades. Seu nome Seu WhatsApp Seu melhor e-mail Inscrever-se ## Cursos - [ Base para Devs ](https://www.treinaweb.com.br/categoria/base-para-devs) - [ Front-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-front-end) - [ Back-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-back-end) - [ Mobile ](https://www.treinaweb.com.br/categoria/desenvolvimento-mobile) - [ Bancos de Dados ](https://www.treinaweb.com.br/categoria/bancos-de-dados) - [ Cloud ](https://www.treinaweb.com.br/categoria/cloud-computing) - [ IA ](https://www.treinaweb.com.br/categoria/ia) - [ E mais ](https://www.treinaweb.com.br/categoria/e-mais) - [ Ver todos os cursos ](https://www.treinaweb.com.br/cursos) ## Conteúdo - [ Formações ](https://www.treinaweb.com.br/formacoes) - [ Projetos práticos ](https://www.treinaweb.com.br/projetos-praticos) - [ Direto ao ponto ](https://www.treinaweb.com.br/direto-ao-ponto) - [ Planos ](https://www.treinaweb.com.br#assinatura) - [ Depoimentos ](https://www.treinaweb.com.br#depoimentos) - [ Comunidade ](https://www.treinaweb.com.br#comunidade) - [ Corpo docente ](https://www.treinaweb.com.br#docente) ## A empresa - [ Sobre a TreinaWeb ](https://www.treinaweb.com.br#sobre) - [ Perguntas frequentes ](https://www.treinaweb.com.br#faq) - [ Vantagens de estudar na TreinaWeb ](https://www.treinaweb.com.br/vantagens-de-estudar-na-treinaweb) - [ Cursos para empresas ](https://www.treinaweb.com.br/empresas) - [ Sugira um novo curso ](https://www.treinaweb.com.br/sugerir-curso) - [ Trabalhe conosco ](https://www.treinaweb.com.br/trabalhe-conosco) - [ Artigos ](https://www.treinaweb.com.br/blog) - [ Desenvolvedores e agentes ](https://www.treinaweb.com.br/developers) - [ Contato ](https://www.treinaweb.com.br/contato) - [ Política de privacidade ](https://www.treinaweb.com.br/politica-de-privacidade) - [ Termos de uso ](https://www.treinaweb.com.br/termos-de-uso) ## Baixe nosso aplicativo [ Disponível na **App Store** ](https://apps.apple.com/us/app/treinaweb/id1322729447) [ Disponível no **Google Play** ](https://play.google.com/store/apps/details?id=br.com.treinaweb.mobile) Av. Paulista, 1765, Conj 71 e 72 · Bela Vista · São Paulo · SP · 01311-200 © 2004 – 2026 TreinaWeb Tecnologia LTDA · CNPJ 06.156.637/0001-58