CSS3 Flexbox
Caixas flexíveis, ou flexbox , é um novo modo de layout no CSS3.
Uso de flexbox garante que os elementos se comportam de maneira previsível quando o layout da página deve acomodar diferentes tamanhos de tela e diferentes dispositivos de exibição.
Para muitas aplicações, o modelo de caixa flexível fornece uma melhoria sobre o modelo de blocos em que ele não usa carros alegóricos, nem margens de colapso do recipiente flexível com as margens de seu conteúdo.
Suporte a navegadores
Os números na tabela especificar a primeira versão do browser que suporta totalmente o recurso.
Números seguido por -webkit- ou -moz- especificar a primeira versão que trabalhou com um prefixo.
| Propriedade | |||||
|---|---|---|---|---|---|
| Basic support (single-line flexbox) |
29.0 21.0 -webkit- |
11.0 | 22.0 18.0 -moz- |
6.1 -webkit- | 12.1 -webkit- |
| Multi-line flexbox | 29.0 21.0 -webkit- |
11.0 | 28.0 | 6.1 -webkit- | 17.0 15.0 -webkit- 12.1 |
CSS3 Flexbox Concepts
Flexbox consiste de recipientes flexíveis e itens de flex.
Um recipiente flexível é declarada definindo a display propriedade de um elemento, quer flex (processado como um bloco) ou inline-flex (processado como in-line).
Dentro de um recipiente flexível, há um ou mais itens de flex.
Nota: Tudo fora um recipiente flex e dentro de um item de flexão é processado como de costume. Flexbox define como itens Flex são definidos dentro de um recipiente flex.
itens Flex estão posicionados dentro de um recipiente flexível ao longo de uma linha flex. Por padrão há apenas uma linha flexível por contêiner flex.
O exemplo a seguir mostra três itens flexíveis. Eles estão posicionados por padrão: ao longo da linha Flex horizontal, da esquerda para a direita:
Exemplo
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: -webkit-flex;
display: flex;
width:
400px;
height: 250px;
background-color:
lightgrey;
}
.flex-item
{
background-color: cornflowerblue;
width: 100px;
height: 100px;
margin: 10px;
}
</style>
</head>
<body>
<div
class="flex-container">
<div class="flex-item">flex item 1</div>
<div class="flex-item">flex item 2</div>
<div
class="flex-item">flex item 3</div>
</div>
</body>
</html>É também possível alterar a direcção da linha de flex.
Se definir a direction propriedade para rtl (da direita para a esquerda), o texto é desenhado direita para a esquerda, e também a linha Flex muda de direção, o que vai mudar o layout da página:
Exemplo
body {
direction: rtl;
}
.flex-container {
display: -webkit-flex;
display: flex;
width:
400px;
height: 250px;
background-color:
lightgrey;
}
.flex-item
{
background-color: cornflowerblue;
width: 100px;
height: 100px;
margin: 10px;
} Direção Flex
O flex-direction propriedade especifica a direção dos itens flexíveis dentro do recipiente flex. O valor padrão de flex-direction é row (da esquerda para a direita, de cima para baixo).
Os outros valores são os seguintes:
-
row-reverse- Se o modo de escrita (direção) é esquerda para a direita, os itens de flex será colocado para fora direita para a esquerda -
column- Se o sistema de escrita é horizontal, os itens de flex será colocado para fora verticalmente -
column-reverse- O mesmo que coluna, mas em sentido inverso
O exemplo a seguir mostra o resultado do uso da row-reverse valor:
Exemplo
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row-reverse;
flex-direction:
row-reverse;
width:
400px;
height: 250px;
background-color:
lightgrey;
} O exemplo a seguir mostra o resultado do uso da column valor:
Exemplo
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction:
column;
width:
400px;
height: 250px;
background-color:
lightgrey;
} O exemplo seguinte mostra o resultado do uso da column-reverse valor:
Exemplo
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column-reverse;
flex-direction:
column-reverse;
width:
400px;
height: 250px;
background-color:
lightgrey;
} A propriedade justificar-content
A justify-content propriedade alinha horizontalmente itens do recipiente flexível quando os itens não use todo o espaço disponível no eixo principal.
Os valores possíveis são os seguintes:
-
flex-start- O valor padrão. Os produtos são posicionados no início do recipiente -
flex-end- Os produtos são posicionados na extremidade do recipiente -
center- Os produtos são posicionadas no centro do recipiente -
space-between- Os itens são posicionados com espaço entre as linhas -
space-around- Os itens são posicionados com espaço antes, entre e após as linhas
O exemplo a seguir mostra o resultado de usar o flex-end valor:
Exemplo
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-justify-content: flex-end;
justify-content:
flex-end;
width:
400px;
height: 250px;
background-color:
lightgrey;
} O exemplo a seguir mostra o resultado da utilização do center valor:
Exemplo
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content:
center;
width:
400px;
height: 250px;
background-color:
lightgrey;
} O exemplo a seguir mostra o resultado da utilização do space-between o valor:
Exemplo
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-between;
justify-content:
space-between;
width:
400px;
height: 250px;
background-color:
lightgrey;
} O exemplo a seguir mostra o resultado da utilização do space-around valor:
Exemplo
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-around;
justify-content:
space-around;
width:
400px;
height: 250px;
background-color:
lightgrey;
} Alinhar-itens de Propriedade
O align-items de propriedade alinha verticalmente itens do recipiente flexível quando os itens não use todo o espaço disponível no eixo transversal.
Os valores possíveis são os seguintes:
-
stretch- O valor padrão. Os itens são esticado para caber o recipiente -
flex-start- Itens são posicionados na parte superior do recipiente -
flex-end- Os produtos são posicionados na parte inferior do recipiente -
center- Os produtos são posicionadas no centro do recipiente (verticalmente) -
baseline- Os itens são posicionados na linha de base do recipiente
O exemplo a seguir mostra o resultado de usar o stretch valor (este é o valor padrão):
Exemplo
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-align-items: stretch;
align-items:
stretch;
width:
400px;
height: 250px;
background-color:
lightgrey;
} O exemplo a seguir mostra o resultado de usar o flex-start valor:
Exemplo
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-align-items: flex-start;
align-items:
flex-start;
width:
400px;
height: 250px;
background-color:
lightgrey;
} O exemplo a seguir mostra o resultado de usar o flex-end valor:
Exemplo
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-align-items: flex-end;
align-items:
flex-end;
width:
400px;
height: 250px;
background-color:
lightgrey;
} O exemplo a seguir mostra o resultado da utilização do center valor:
Exemplo
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items:
center;
width:
400px;
height: 250px;
background-color:
lightgrey;
} O exemplo a seguir mostra o resultado do uso da baseline de valor:
Exemplo
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-align-items: baseline;
align-items:
baseline;
width:
400px;
height: 250px;
background-color:
lightgrey;
} A propriedade flex-envoltório
O flex-wrap propriedade especifica se os itens de flex deve envolver ou não, se não houver espaço suficiente para eles em uma linha flex.
Os valores possíveis são os seguintes:
-
nowrap- O valor padrão. Os itens flexíveis não será moldado -
wrap- Os itens flexíveis vai embrulhar se necessário -
wrap-reverse- Os itens flexíveis vai embrulhar, se necessário, em ordem inversa
O exemplo a seguir mostra o resultado do uso da nowrap valor (este é o valor padrão):
Exemplo
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: nowrap;
flex-wrap: nowrap;
width:
300px;
height: 250px;
background-color:
lightgrey;
} O exemplo a seguir mostra o resultado de usar o wrap valor:
Exemplo
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
width:
300px;
height: 250px;
background-color:
lightgrey;
} O exemplo a seguir mostra o resultado de usar o wrap-reverse valor:
Exemplo
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap-reverse;
flex-wrap:
wrap-reverse;
width:
300px;
height: 250px;
background-color:
lightgrey;
} A propriedade align-content
O align-content propriedade modifica o comportamento do flex-wrap propriedade. É semelhante ao align-items , mas em vez de alinhar itens de flex, ele se alinha flex linhas.
Os valores possíveis são os seguintes:
-
stretch- O valor padrão. Linhas esticar para ocupar o espaço restante -
flex-start- As linhas são embalados em direção ao início do recipiente flexível -
flex-end- As linhas são embalados em direção à extremidade do recipiente flexível -
center- As linhas são embalados em direção ao centro do recipiente flexível -
space-between- As linhas são distribuídas uniformemente no recipiente flexível -
space-around- As linhas são distribuídas uniformemente no recipiente flexível, com espaços metade do tamanho em cada extremidade
O exemplo a seguir mostra o resultado da utilização do center valor:
Exemplo
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap:
wrap;
-webkit-align-content: center;
align-content:
center;
width:
300px;
height: 300px;
background-color:
lightgrey;
} As propriedades dos itens Flex
Encomenda
A order propriedade especifica a ordem de um item em relação flexível para o resto dos itens flexíveis dentro do mesmo recipiente:
Exemplo
.flex-item {
background-color: cornflowerblue;
width: 100px;
height: 100px;
margin: 10px;
}
.first {
-webkit-order: -1;
order: -1;
} Margem
Definindo margin: auto; absorverá o espaço extra. Ele pode ser usado para empurrar itens de flex em posições diferentes.
No exemplo a seguir vamos definir margin-right: auto; no primeiro item flex. Isto irá fazer com que todo o espaço extra para ser absorvida para a direita do referido elemento:
Exemplo
.flex-item {
background-color: cornflowerblue;
width: 75px;
height: 75px;
margin: 10px;
}
.flex-item:first-child {
margin-right: auto;
} Centering perfeita
No exemplo a seguir, vamos resolver um problema quase que diariamente: centragem perfeita.
É muito fácil com flexbox. Definindo margin: auto; fará o artigo perfeitamente centrada em ambos os eixos:
Exemplo
.flex-item {
background-color: cornflowerblue;
width: 75px;
height: 75px;
margin: auto;
} alinhar-self
O align-self propriedade de itens de flex substitui alinhar-itens de propriedade do recipiente flexível para esse item. Ele tem os mesmos valores possíveis como a align-items propriedade.
O exemplo a seguir define valores diferentes align-auto para cada item Flex:
Exemplo
.flex-item {
background-color: cornflowerblue;
width: 60px;
min-height: 100px;
margin: 10px;
}
.item1 {
-webkit-align-self: flex-start;
align-self:
flex-start;
}
.item2 {
-webkit-align-self: flex-end;
align-self: flex-end;
}
.item3 {
-webkit-align-self: center;
align-self: center;
}
.item4 {
-webkit-align-self:
baseline;
align-self: baseline;
}
.item5 {
-webkit-align-self: stretch;
align-self: stretch;
} flexionar
O flex propriedade especifica o comprimento do produto flexível, em relação ao resto dos elementos flexíveis no interior do mesmo recipiente.
No exemplo a seguir, o primeiro item flex consomem 2/4 do espaço livre, e os outros dois itens de flex vai consumir 1/4 do espaço livre cada um:
Exemplo
.flex-item {
background-color: cornflowerblue;
margin: 10px;
}
.item1 {
-webkit-flex: 2;
flex: 2;
}
.item2 {
-webkit-flex: 1;
flex: 1;
}
.item3 {
-webkit-flex: 1;
flex: 1;
} 
mais Exemplos
Criar um site responsivo com flexbox
Este exemplo demonstra como criar um layout do site responsivo com flexbox.
Propriedades flexbox CSS3
A tabela a seguir lista as propriedades CSS usados com flexbox:
| Property | Description |
|---|---|
| display | Specifies the type of box used for an HTML element |
| flex-direction | Specifies the direction of the flexible items inside a flex container |
| justify-content | Horizontally aligns the flex items when the items do not use all available space on the main-axis |
| align-items | Vertically aligns the flex items when the items do not use all available space on the cross-axis |
| flex-wrap | Specifies whether the flex items should wrap or not, if there is not enough room for them on one flex line |
| 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 |
| flex-flow | A shorthand propert for flex-direction and flex-wrap |
| order | Specifies the order of a flexible item relative to the rest of the flex items inside the same container |
| align-self | Used on flex items. Overrides the container's align-items property |
| flex | Specifies the length of a flex item, relative to the rest of the flex items inside the same container |