O que é o Flexbox?
Flexbox, ou "Flexible Box", é um modelo de layout do CSS projetado para criar layouts dinâmicos e responsivos. Ele permite distribuir espaço entre os itens de um contêiner e ajustar o layout mesmo quando o tamanho dos itens é desconhecido ou variável. O principal objetivo do Flexbox é simplificar o alinhamento e distribuição de espaço entre elementos em um contêiner, sem a necessidade de usar floats ou posicionamento absoluto.
Como Funciona o Flexbox?
Para usar o Flexbox, você precisa declarar o contêiner como um flex container usando a propriedade display: flex ou display: inline-flex no seu CSS. Depois, você pode controlar o alinhamento e a distribuição dos itens dentro desse contêiner com várias propriedades.
Propriedades do Flexbox
Existem várias propriedades que você pode usar para controlar o comportamento do Flexbox. Aqui estão algumas das mais importantes:
display: flex
Essa propriedade define um contêiner flexível, permitindo que todos os seus itens internos sejam tratados como "flex items".
.container {
display: flex;
}
flex-direction
Controla a direção dos itens dentro do contêiner flexível. Os valores possíveis são:
row(default): Alinha os itens na horizontal, da esquerda para a direita.column: Alinha os itens na vertical, de cima para baixo.row-reverse: Alinha os itens na horizontal, mas da direita para a esquerda.column-reverse: Alinha os itens na vertical, de baixo para cima.
.container {
display: flex;
flex-direction: column;
}
justify-content
Alinha os itens ao longo do eixo principal do contêiner. O eixo principal é determinado pela propriedade flex-direction (por exemplo, horizontal ou vertical).
flex-start(default): Alinha os itens no início do contêiner.flex-end: Alinha os itens no final do contêiner.center: Alinha os itens no centro do contêiner.space-between: Distribui os itens com o maior espaçamento possível entre eles.space-around: Distribui os itens com espaçamento igual ao redor de cada item.space-evenly: Distribui os itens com espaçamento igual entre eles e nas bordas do contêiner.
.container {
display: flex;
justify-content: space-between;
}
align-items
Alinha os itens ao longo do eixo transversal, que é perpendicular ao eixo principal (vertical se a direção for horizontal, e vice-versa).
flex-start: Alinha os itens no início do eixo transversal.flex-end: Alinha os itens no final do eixo transversal.center: Alinha os itens no centro do eixo transversal.baseline: Alinha os itens pela linha de base do conteúdo.stretch(default): Estica os itens para preencher o contêiner.
.container {
display: flex;
align-items: center;
}
align-self
Permite que um item dentro de um contêiner flexível tenha um alinhamento diferente dos outros itens, substituindo a configuração de align-items apenas para esse item específico.
.item {
align-self: flex-end;
}
Exemplo Prático: Criando um Layout de Navegação
Agora vamos ver um exemplo prático de como usar o Flexbox para criar um layout de navegação simples, com uma lista de links horizontais, onde os itens são distribuídos de maneira uniforme.
.container {
display: flex;
justify-content: space-around;
}
ul {
list-style-type: none;
padding: 0;
display: flex;
}
li {
margin: 0 10px;
}
a {
text-decoration: none;
color: #569cd6;
}
Usando Flexbox para Layouts Complexos
Você pode usar o Flexbox para layouts mais complexos, como criar um layout de duas colunas, onde a coluna principal é maior e a coluna lateral é menor. Aqui está um exemplo de como fazer isso:
.container {
display: flex;
}
.main {
flex: 3;
padding: 20px;
}
.sidebar {
flex: 1;
padding: 20px;
}
Conteúdo principal do site