Postado Por:
Categoria:
Postado em:
Domine o Flexbox: A Solução CSS para Layouts Flexíveis e Responsivos
Aprenda a criar designs modernos e adaptáveis com o poder do Flexbox
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.
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
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.
.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.
Playground
Para testar, brinque um pouco com cada uma das propriedades para ver as possibilidades:
Referências:
CSS:
Flexbox:
Esses links direcionam para as documentações mais completas e confiáveis sobre CSS e Flexbox, oferecendo informações detalhadas e exemplos práticos.
Deixe seu comentário
Posts RELACIONADOS
Introdução ao React: Como Iniciar Seu Primeiro Projeto
React é uma biblioteca JavaScript amplamente utilizada para a construção de interfaces de usuário dinâmicas e componentes reutilizáveis. Neste tutorial, você aprenderá os conceitos básicos...
Como Criar um Chat em Tempo Real com PHP e WebSockets
Neste tutorial, você aprenderá como criar um sistema de chat em tempo real utilizando WebSockets com PHP para o backend e HTML, CSS e JavaScript...
Guia Completo de CSS: Principais Propriedades e Como Utilizá-las com Classes
O CSS é uma linguagem fundamental para estilizar páginas web. Este guia detalhado aborda as principais propriedades do CSS e como utilizá-las eficientemente usando classes....
Introdução ao MySQL: Consultas Básicas com o Banco de Dados Sakila
MySQL é um dos sistemas de gerenciamento de banco de dados mais populares e amplamente utilizados no desenvolvimento web. Neste post, exploraremos os conceitos básicos...
Trabalhando com Tabelas em HTML: Estruturação e Prática com Exercícios
As tabelas em HTML são uma ferramenta poderosa para organizar dados de forma estruturada e legível. Neste post, vamos explorar como criar tabelas, entender suas...
Introdução ao Desenvolvimento Web com HTML: Primeiros Passos para Criar Páginas Web
O HTML (HyperText Markup Language) é a linguagem fundamental para o desenvolvimento de páginas web. Neste post, vamos explorar os conceitos básicos do HTML, entender...