Itens Flexíveis CSS
Elementos filhos (itens)
Os elementos filho diretos de um contêiner flex automaticamente se tornam itens flexíveis (flex).
1
2
3
4
O elemento acima representa quatro itens flexíveis azuis dentro de um contêiner flexível cinza.
Exemplo
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
As propriedades do item flexível são:
A propriedade da ordem
A orderpropriedade especifica a ordem dos itens flexíveis.
1
2
3
4
O primeiro item flexível no código não precisa aparecer como o primeiro item no layout.
O valor do pedido deve ser um número, o valor padrão é 0.
Exemplo
A propriedade order pode alterar a ordem dos itens flexíveis:
<div class="flex-container">
<div style="order: 3">1</div>
<div style="order: 2">2</div>
<div style="order: 4">3</div>
<div style="order: 1">4</div>
</div>
A propriedade flex-grow
A flex-growpropriedade especifica quanto um item flexível crescerá em relação ao restante dos itens flexíveis.
1
2
3
O valor deve ser um número, o valor padrão é 0.
Exemplo
Faça o terceiro item flexível crescer oito vezes mais rápido que os outros itens flexíveis:
<div class="flex-container">
<div style="flex-grow: 1">1</div>
<div style="flex-grow: 1">2</div>
<div style="flex-grow:
8">3</div>
</div>
A propriedade flex-shrink
A flex-shrinkpropriedade especifica quanto um item flexível diminuirá em relação ao restante dos itens flexíveis.
1
2
3
4
5
6
7
8
9
10
O valor deve ser um número, o valor padrão é 1.
Exemplo
Não deixe o terceiro item flexível encolher tanto quanto os outros itens flexíveis:
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="flex-shrink:
0">3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
</div>
A propriedade de base flexível
A flex-basispropriedade especifica o comprimento inicial de um item flexível.
1
2
3
4
Exemplo
Defina o comprimento inicial do terceiro item flexível para 200 pixels:
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="flex-basis: 200px">3</div>
<div>4</div>
</div>
A propriedade flexível
A flexpropriedade é uma propriedade abreviada para as propriedades
flex-grow, flex-shrinke flex-basis.
Exemplo
Torne o terceiro item flexível não expansível (0), não encolhe (0) e com um comprimento inicial de 200 pixels:
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="flex:
0 0 200px">3</div>
<div>4</div>
</div>
A propriedade align-self
A align-selfpropriedade especifica o alinhamento do item selecionado dentro do contêiner flexível.
A align-self propriedade substitui o alinhamento padrão definido pela align-itemspropriedade do contêiner.
1
2
3
4
Nestes exemplos usamos um container de 200 pixels de altura, para melhor demonstrar a
align-selfpropriedade:
Exemplo
Alinhe o terceiro item flexível no meio do contêiner:
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="align-self:
center">3</div>
<div>4</div>
</div>
Exemplo
Alinhe o segundo item flexível na parte superior do contêiner e o terceiro item flexível na parte inferior do contêiner:
<div class="flex-container">
<div>1</div>
<div style="align-self:
flex-start">2</div>
<div style="align-self:
flex-end">3</div>
<div>4</div>
</div>
As propriedades dos itens CSS Flexbox
A tabela a seguir lista todas as propriedades dos itens CSS Flexbox:
| Property | Description |
|---|---|
| align-self | Specifies the alignment for a flex item (overrides the flex container's align-items property) |
| flex | A shorthand property for the flex-grow, flex-shrink, and the flex-basis properties |
| flex-basis | Specifies the initial length of a flex item |
| flex-grow | Specifies how much a flex item will grow relative to the rest of the flex items inside the same container |
| flex-shrink | Specifies how much a flex item will shrink relative to the rest of the flex items inside the same container |
| order | Specifies the order of the flex items inside the same container |