tutoriais mais recente desenvolvimento web
×

CSS Tutorial

CSS CASA CSS Introdução CSS Sintaxe CSS Como CSS cores CSS Fundos CSS Fronteiras CSS margens CSS Preenchimento CSS Altura largura CSS Texto CSS fontes CSS ligações CSS listas CSS tabelas CSS Modelo de Caixa CSS Contorno CSS de exibição CSS Largura máxima CSS Posição CSS Flutuador CSS Inline-block CSS Alinhar CSS combinadores CSS Pseudo-classe CSS Pseudo-elemento CSS Barra de navegação CSS dropdowns CSS tooltips CSS Galeria de imagens CSS Opacidade imagem CSS Sprites imagem CSS attr seletores Formas CSS CSS contadores

CSS3

CSS3 Introdução CSS3 Cantos arredondados CSS3 Imagens de fronteira CSS3 Fundos CSS3 cores CSS3 gradientes CSS3 sombras CSS3 Texto CSS3 fontes CSS3 transformações 2D CSS3 transformações 3D CSS3 transições CSS3 animações CSS3 imagens CSS3 botões CSS3 Paginação CSS3 várias Colunas CSS3 Interface de usuário CSS3 box Dimensionamento CSS3 Flexbox CSS3 Consultas de mídia CSS3 Exemplos MQ

CSS Web design responsivo

Web design responsivo Intro Web design responsivo Janela de exibição Web design responsivo Grid View Web design responsivo Consultas de mídia Web design responsivo imagens Web design responsivo vídeos Web design responsivo Frameworks

CSS Examples

CSS Exemplos CSS Questionário CSS Certificado

CSS References

CSS Referência CSS seletores CSS Funções CSS Aural referência CSS Web Safe fontes CSS Animatable CSS Unidades CSS PX-EM conversor CSS cores CSS Valores de cor CSS Nomes das cores CSS3 Suporte a navegadores

 

CSS3 Flexible Box


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>

Tente você mesmo "

É 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;
}

Tente você mesmo "


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;
}

Tente você mesmo "

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;
}

Tente você mesmo "

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;
}

Tente você mesmo "


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;
}

Tente você mesmo "

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;
}

Tente você mesmo "

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;
}

Tente você mesmo "

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;
}

Tente você mesmo "


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;
}

Tente você mesmo "

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;
}

Tente você mesmo "

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;
}

Tente você mesmo "

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;
}

Tente você mesmo "

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;
}

Tente você mesmo "


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;
}

Tente você mesmo "

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;
}

Tente você mesmo "

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;
}

Tente você mesmo "


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;
}

Tente você mesmo "


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;
}

Tente você mesmo "

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;
}

Tente você mesmo "

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;
}

Tente você mesmo "

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;
}

Tente você mesmo "

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;
}

Tente você mesmo "


Exemplos

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