Contêiner Flex CSS
Elemento pai (contêiner)
Como especificamos no capítulo anterior, este é um contêiner flexível (a área azul) com três itens flexíveis :
1
2
3
O contêiner flexível se torna flexível definindo a displaypropriedade como
flex:
Exemplo
.flex-container {
display: flex;
}
As propriedades do contêiner flexível são:
A propriedade flex-direction
A flex-directionpropriedade define em qual direção o container deseja empilhar os itens flexíveis.
1
2
3
Exemplo
O columnvalor empilha os itens flexíveis verticalmente (de cima para baixo):
.flex-container {
display: flex;
flex-direction: column;
}
Exemplo
O column-reversevalor empilha os itens flexíveis verticalmente (mas de baixo para cima):
.flex-container {
display: flex;
flex-direction: column-reverse;
}
Exemplo
O rowvalor empilha os itens flexíveis horizontalmente (da esquerda para a direita):
.flex-container {
display: flex;
flex-direction: row;
}
Exemplo
O row-reversevalor empilha os itens flexíveis horizontalmente (mas da direita para a esquerda):
.flex-container {
display: flex;
flex-direction: row-reverse;
}
A propriedade flex-wrap
A flex-wrappropriedade especifica se os itens flexíveis devem ser encapsulados ou não.
Os exemplos abaixo possuem 12 itens flexíveis, para melhor demonstrar a
flex-wrappropriedade.
1
2
3
4
5
6
7
8
9
10
11
12
Exemplo
O wrapvalor especifica que os itens flexíveis serão encapsulados, se necessário:
.flex-container {
display: flex;
flex-wrap: wrap;
}
Exemplo
O nowrapvalor especifica que os itens flexíveis não serão encapsulados (este é o padrão):
.flex-container {
display: flex;
flex-wrap: nowrap;
}
Exemplo
O wrap-reversevalor especifica que os itens flexíveis serão agrupados se necessário, na ordem inversa:
.flex-container {
display: flex;
flex-wrap: wrap-reverse;
}
A propriedade de fluxo flexível
A flex-flowpropriedade é uma propriedade abreviada para definir as propriedades
flex-directione
flex-wrap.
Exemplo
.flex-container {
display: flex;
flex-flow: row wrap;
}
A propriedade justificar-conteúdo
A justify-contentpropriedade é usada para alinhar os itens flexíveis:
1
2
3
Exemplo
O centervalor alinha os itens flexíveis no centro do contêiner:
.flex-container {
display: flex;
justify-content: center;
}
Exemplo
O flex-startvalor alinha os itens flexíveis no início do contêiner (este é o padrão):
.flex-container {
display: flex;
justify-content: flex-start;
}
Exemplo
O flex-endvalor alinha os itens flexíveis no final do contêiner:
.flex-container {
display: flex;
justify-content: flex-end;
}
Exemplo
O space-aroundvalor exibe os itens flexíveis com espaço antes, entre e depois das linhas:
.flex-container {
display: flex;
justify-content: space-around;
}
Exemplo
O space-betweenvalor exibe os itens flexíveis com espaço entre as linhas:
.flex-container {
display: flex;
justify-content: space-between;
}
A propriedade align-items
A align-itemspropriedade é usada para alinhar os itens flexíveis.
1
2
3
Nestes exemplos utilizamos um container de 200 pixels de altura, para melhor demonstrar a
align-itemspropriedade.
Exemplo
O centervalor alinha os itens flexíveis no meio do contêiner:
.flex-container {
display: flex;
height: 200px;
align-items: center;
}
Exemplo
O flex-startvalor alinha os itens flexíveis na parte superior do contêiner:
.flex-container {
display: flex;
height: 200px;
align-items: flex-start;
}
Exemplo
O flex-endvalor alinha os itens flexíveis na parte inferior do contêiner:
.flex-container {
display: flex;
height: 200px;
align-items: flex-end;
}
Exemplo
O stretchvalor estica os itens flexíveis para preencher o contêiner (este é o padrão):
.flex-container {
display: flex;
height: 200px;
align-items: stretch;
}
Exemplo
O baselinevalor alinha os itens flexíveis, como suas linhas de base alinham:
.flex-container {
display: flex;
height: 200px;
align-items: baseline;
}
Observação: o exemplo usa tamanhos de fonte diferentes para demonstrar que os itens são alinhados pela linha de base do texto:
1
2
3
A propriedade align-content
A align-contentpropriedade é usada para alinhar as linhas flexíveis.
1
2
3
4
5
6
7
8
9
10
11
12
Nestes exemplos usamos um container de 600 pixels de altura, com a
flex-wrappropriedade configurada para wrap, para melhor demonstrar a align-contentpropriedade.
Exemplo
O space-betweenvalor exibe as linhas flexíveis com espaço igual entre elas:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: space-between;
}
Exemplo
O space-aroundvalor exibe as linhas flexíveis com espaço antes, entre e depois delas:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: space-around;
}
Exemplo
O stretchvalor estica as linhas flexíveis para ocupar o espaço restante (este é o padrão):
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: stretch;
}
Exemplo
O centervalor exibido exibe as linhas flexíveis no meio do contêiner:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: center;
}
Exemplo
O flex-startvalor exibe as linhas flexíveis no início do contêiner:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: flex-start;
}
Exemplo
O flex-endvalor exibe as linhas flexíveis no final do contêiner:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: flex-end;
}
Centralização Perfeita
No exemplo a seguir vamos resolver um problema de estilo muito comum: centralização perfeita.
SOLUÇÃO: Defina as propriedades
justify-contente como , e o item flex ficará perfeitamente centralizado:align-itemscenter
Exemplo
.flex-container {
display: flex;
height: 300px;
justify-content:
center;
align-items: center;
}
Propriedades do Contêiner CSS Flexbox
A tabela a seguir lista todas as propriedades do CSS Flexbox Container:
| Property | Description |
|---|---|
| align-content | Modifies the behavior of the flex-wrap property. It is similar to align-items, but instead of aligning flex items, it aligns flex lines |
| align-items | Vertically aligns the flex items when the items do not use all available space on the cross-axis |
| display | Specifies the type of box used for an HTML element |
| flex-direction | Specifies the direction of the flexible items inside a flex container |
| flex-flow | A shorthand property for flex-direction and flex-wrap |
| flex-wrap | Specifies whether the flex items should wrap or not, if there is not enough room for them on one flex line |
| justify-content | Horizontally aligns the flex items when the items do not use all available space on the main-axis |