Layout de caixa flexvel

("Flexbox") no Internet
Explorer 10
Neste artigo

O continer do flexbox

Adicionando elementos filho do flexbox

Tpicos relacionados
Observao Esse contedo se aplica Caixa Flexvel CSS no Internet Explorer 10. Para obter uma viso geral
mais atual do flexbox, consulte Layout de caixa flexvel.
Cuidado O Internet Explorer 11 no d mais suporte ao prefixo de fornecedor da Microsoft ("-ms-") das
propriedades do flexbox. Em vez disso, voc deve usar os nomes sem prefixo, preferveis para mais conformidade
com padres e futura compatibilidade. Veja Atualizaes do layout de caixa flexvel ("Flexbox") para acessar um
resumo das alteraes e prticas recomendadas.
O Internet Explorer 10 e os aplicativos da Windows Store em JavaScript para Windows 8 so compatveis com
o Mdulo de Layout de Caixa Flexvel CSS ("Flexbox"). O mdulo flexbox era, no momento da elaborao deste
documento, uma Verso Preliminar de Trabalho do W3C (World Wide Web Consortium). (A implementao do
flexbox no Internet Explorer 10 baseada na verso de 22 de maro de 2012 da Verso Preliminar de Trabalho do
Flexbox.) O Flexbox se soma aos quatro modos de layout bsicos definidos na CSS2.1 (Folhas de Estilos em
Cascata Nvel 2, Reviso 1) (e habilitados por meio da propriedade display): layout em bloco, layout embutido,
layout de tabela e layout posicionado. O layout Flexbox destina-se criao de layouts para pginas da Web mais
complexas. especialmente til para fazer a posio e o tamanho relativos dos elementos permanecerem
constantes, mesmo quando os tamanhos das janelas de tela e navegador variam e mudam.O Flexbox pode
diminuir a dependncia das flutuaes, que so mais complicadas de posicionar e dimensionar corretamente.
O layout Flexbox leva em conta o espao disponvel ao definir as dimenses da caixa, permitindo assim tamanhos
e posicionamento relativos. Por exemplo, voc pode garantir que o espao extra em branco em uma janela do
navegador seja distribudo igualmente ao tamanho de vrios elementos filho, e que esses elementos filho fiquem
centralizados no meio do bloco de contedo.
Com o layout flexbox, voc pode:

Criar um layout que seja fluido mesmo com o uso de diferentes tamanhos de janelas de tela e navegador
mas que contenha elementos (como imagens ou controles) que mantenham sua posio e tamanho em relao
uns aos outros.

Especificar como o excesso de espao junto ao eixo do layout (horizontal ou vertical) de uma srie de
elementos pode ser alocado proporcionalmente para aumentar o tamanho dos elementos.

Especificar como o excesso de espao junto ao eixo do layout de uma srie de elementos pode ser alocado
para cair antes, depois ou entre a srie de elementos.

Especificar como o excesso de espao perpendicular ao eixo do layout de um elemento pode ser moldado
em torno do elemento por exemplo, espao extra acima ou abaixo de botes que foram dispostos lado a lado.

Controlar a direo em que os elementos so dispostos na pgina por exemplo, de cima para baixo, da
esquerda para a direita, da direita para a esquerda ou de baixo para cima.

Reordenar os elementos na tela em uma ordem que seja diferente de como eles so especificados pelo
DOM (Document Object Model).

O continer do flexbox
Para habilitar o layout flexbox, primeiro voc precisa criar um continer do flexbox. Para fazer isso, defina a
propriedadedisplay de um elemento como "-ms-flexbox" (para um continer do flexbox no nvel de bloco) ou "-msinline-flexbox" (para um continer do flexbox embutido). (Devido ao status de verso preliminar do Mdulo de
Layout de Caixa Flexvel CSS, esse valor e todas as propriedades nesta seo devem ser usados com o prefixo de
fornecedor especfico da Microsoft, "-ms-", para funcionarem com o Internet Explorer 10 e os aplicativos da
Windows Store que usam JavaScript no Windows 8.) Por exemplo, o exemplo de cdigo a seguir cria um continer
do flexbox em nvel de bloco no elemento com a ID "myFlexbox":
CSS

<style type="text/css">
#myFlexbox {
display: -ms-flexbox;
background: gray;
border: blue;
}
</style>

Definindo a orientao do flexbox

Ao criar um continer do flexbox, voc tambm pode definir sua orientao ou seja, especificar se seus filhos
so mostrados da direita para a esquerda, da esquerda para a direita, de cima para baixo ou de baixo para cima. A
seguinte propriedade faz isso:

Propriedade

Descrio

-ms-flexdirection

Especifica a orientao no layout de todos os elementos filho do

objeto.
Os valores possveis dessa propriedade so as seguintes palavraschave:
row
Esse o valor inicial. Os elementos filho so mostrados na
mesma ordem em que so declarados no documento de origem,
da esquerda para a direita.

column
Os elementos filho so mostrados na mesma ordem em que so
declarados no documento de origem, de cima para baixo.

row-reverse
Os elementos filho so mostrados na ordem inversa da que so
declarados no documento de origem, da direita para a esquerda.

column-reverse
Os elementos filho so mostrados na ordem inversa da que so
declarados no documento de origem, de baixo para cima.
inherit
Os elementos filho so mostrados na mesma ordem do valor
calculado dessa propriedade para o elemento pai.
Por exemplo, o seletor de ID a seguir adicionou a propriedade -ms-flex-direction e a definiu para row.
CSS

<style type="text/css">
#myFlexbox
{
display: -ms-flexbox;
-ms-flex-direction: row;
background: grey;
border: blue;
}
</style>

Definindo o alinhamento do flexbox

Ao criar um continer do flexbox, voc tambm pode definir seu alinhamento isso , especificar em que sentido
seus filhos devem ser mostrados, mas perpendicular ao eixo do layout definido pela propriedade -ms-flexdirection.

Propriedade

Descrio

-ms-flexalign

Especifica o alinhamento (perpendicular ao eixo do layout definido pela

propriedade -ms-flex-direction) de elementos filho do objeto.
Os valores possveis dessa propriedade so as seguintes palavras-chave.
Saiba que essas palavras-chave so dependentes de writing-mode;
tanto a borda esquerda do elemento pai e dos elementos filho e a borda
direita dos elementos filho dependem do sentido do layout. Por exemplo,
para um layout da esquerda para a direita, a borda esquerda a borda
superior do elemento pai; para um layout de cima para baixo, a borda
esquerda a borda esquerda do elemento pai e assim por diante. De
forma semelhante, para um layout da esquerda para a direita, a borda
esquerda dos elementos filho a borda inferior; para um layout de cima
para baixo, a borda esquerda dos elementos filho a borda direita e assim
por diante.
start

Se o elemento pai tem um valor calculado para -ms-flexdirection de row ou column, a borda esquerda (ou a linha de
base) de cada elemento filho alinhada com a borda esquerda do
objeto. Todo o espao que resta, perpendicular ao eixo do layout,
posicionado depois da borda esquerda de cada elemento filho.
Se o elemento pai tem um valor calculado para -ms-flexdirection de row-reverse oucolumn-reverse, a borda esquerda
(ou a linha de base) de cada elemento filho alinhada com a borda
esquerda do objeto. Todo o espao que resta, perpendicular ao eixo
do layout, posicionado antes da borda esquerda de cada elemento
filho.

end
Se o elemento pai tem um valor calculado para -ms-flexdirection de row ou column, a borda direita de cada elemento
filho alinhada com a borda direita do objeto. Todo o espao que
resta, perpendicular ao eixo do layout, posicionado antes da
borda esquerda de cada elemento filho.
Se o elemento pai tem um valor calculado para -ms-flexdirection de row-reverse oucolumn-reverse, a borda esquerda
de cada elemento filho alinhada com a borda esquerda do objeto.
Todo o espao que resta, perpendicular ao eixo do layout,
posicionado depois da borda direita de cada elemento filho.

center
Cada elemento filho centralizado entre as bordas esquerda e
direita do objeto. Todo o espao que resta, perpendicular ao eixo
do layout, distribudo uniformemente antes e depois de cada
filho.

stretch
Esse o valor inicial. Cada elemento filho ampliado para
preencher completamente o espao disponvel perpendicular ao

eixo do layout. Se definida, a propriedade maxwidth ou max-height de um elemento filho tem precedncia
e o layout segue a regra da start.

baseline
As linhas de base (borda esquerda ou borda direita dependentes da
propriedade -ms-flex-direction) de todos os elementos filho
so alinhadas entre si.
O elemento filho que ocupa mais espao, perpendicular ao eixo do
layout, segue a regra dastart; as linhas de base de todos os
elementos que restam so ento alinhadas com a linha de base
desse elemento.

Por exemplo, o seletor de ID a seguir adicionou a propriedade -ms-flex-align e a definiu para start.
CSS

<style type="text/css">
#myFlexbox
{
display: -ms-flexbox;
-ms-flex-align: start;
background: grey;
border: blue;
}
</style>

Distribuindo espaos em branco entre elementos filho do flexbox

Voc pode especificar a distribuio de espaos em branco entre os elementos filho do flexbox usando esta
propriedade:

Propriedade

Descrio

-ms-flexpack

Especifica como o espao excedente distribudo (ao longo do eixo

definido pela propriedade -ms-flex-direction) entre os elementos
filho do objeto.
Os valores possveis para essa propriedade so as palavras-chave a
seguir. Esteja ciente de que estas so palavras-chave dependentes

do writing-mode; as bordas inicial e final do elemento pai e dos

elementos filho dependem do sentido do layout. Por exemplo, para um
layout da esquerda para a direita, a borda inicial a borda esquerda do
elemento pai. Para um layout de cima para baixo, a borda inicial a
borda superior e assim por diante. Da mesma forma, a borda final de um
elemento filho a borda direita em um layout da esquerda para a direita,
a borda inferior em um layout de cima para baixo e assim por diante.
start
Este o valor inicial. A borda inicial do primeiro elemento filho
posicionada no incio do elemento pai; a borda inicial do prximo
elemento filho posicionada borda a borda com a borda final do
primeiro elemento filho; e assim por diante ao longo do sentido do
eixo do layout. Todo o espao restante ao longo do eixo do layout
posicionado ao final do eixo do layout.

end
A borda final do primeiro elemento filho posicionada no fim do
elemento pai. A borda final do prximo elemento filho
posicionada borda a borda com a borda inicial do primeiro
elemento filho e assim por diante ao longo do sentido do eixo do
layout. Todo o espao restante ao longo do eixo do layout
posicionado no incio do eixo do layout.

center
Todos os elementos filho so posicionados borda a borda uns com
os outros, de acordo com as descries das palavraschave start ou end. Entretanto, o grupo de elementos filho
centralizado entre as bordas inicial e final do elemento pai, de
forma que todo o espao restante seja distribudo uniformemente
antes do primeiro e aps o ltimo elemento filho.

justify
A borda inicial do primeiro elemento filho posicionada no incio

do elemento pai. A borda final do ltimo elemento filho

posicionada borda a borda com o fim da caixa pai; e todos os filhos
restantes so posicionados entre o primeiro e o ltimo elemento
filho, de forma que qualquer espao remanescente ao longo do
eixo do layout seja distribudo igualmente entre os elementos filho.

Por exemplo, o seletor de ID a seguir adicionou a propriedade -ms-flex-pack e a definiu como justificada.
CSS

<style type="text/css">
#myFlexbox
{
display: -ms-flexbox;
-ms-flex-pack: justify;
background: grey;
border: blue;
}
</style>

Habilitando a quebra automtica de elementos filho

Voc pode ativar os elementos filho do flexbox que esto estourando para quebrar automaticamente para a linha
seguinte e controlar o sentido do fluxo usando esta propriedade:

Propriedade

Descrio

-ms-flexwrap

Especifica se os elementos filho so quebrados em vrias linhas ou

colunas de acordo com o espao disponvel no objeto.
Os valores possveis para esta propriedade so as seguintes palavraschave:
none
Este o valor inicial Todos os elementos filho so mostrados em
uma nica linha ou coluna. A propriedade overflow do objeto
determina se os elementos filho so ocultos, recordados ou
rolveis.
wrap
Os elementos filho so quebrados e mostrados em linhas ou
colunas paralelas sucessivas. O objeto expandido em altura ou
largura, perpendicular ao eixo definido pela propriedadewritingmode para acomodar as linhas ou colunas adicionais.

wrap-reverse
Os elementos filho so quebrados e mostrados em linhas ou
colunas paralelas sucessivas em ordem inversa. O objeto
expandido em altura ou largura, perpendicular ao eixo definido
pela propriedade writing-mode para acomodar as linhas ou
colunas adicionais.

Esteja ciente de que o Internet Explorer 10 tenta encaixar os elementos filho de uma caixa pai no menor nmero
de linhas possvel, reduzindo todas as caixas a seu tamanho mnimo. Um nico elemento que no couber em sua
linha ser recortado no final da linha.
Por padro, linhas adicionais so acrescentadas para reter o sentido do bloco. Nos layouts da esquerda para a
direita e da direita para a esquerda, novas linhas so adicionadas abaixo das linhas existentes (a menos que um
novo sentido do bloco de cima para baixo tenha sido explicitamente definido em outro lugar). Da mesma forma, o
fato de novas linhas aparecerem ou no direita ou esquerda do layout vertical depender do sentido do bloco,
que pode ser da esquerda para a direita ou da direita para a esquerda, dependendo do sentido de escrita ou outras
configuraes especficas.
Por exemplo, o seletor de ID a seguir adicionou a propriedade -ms-flex-wrap e a definiu para wrap.
CSS

<style type="text/css">
#myFlexbox
{
display: -ms-flexbox;
-ms-flex-wrap: wrap;
background: grey;
border: blue;
}
</style>

Adicionando elementos filho do flexbox

Agora que voc criou um continer do flexbox, pode adicionar elementos filho a ele. Para adicionar um elemento
filho ao continer do flexbox, converta o elemento em um filho imediato do elemento do flexbox, como mostra a
seguinte marcao:
CSS

<style type="text/css">
#myFlexbox {
background: gray;
border: blue;

display: -ms-flexbox;
}
#child1 {
background: maroon;
border: orange solid 1px;
}
#child2 {
background: lightgray;
border: red solid 1px;
}
</style>
<body>
<div id="myFlexbox">
<div id="child1">child 1</div>
<div id="child2">child 2</div>
</div>
...
</body>

Definindo a flexibilidade de um elemento filho

Voc pode controlar como o espao excedente ao longo do eixo do layout de uma caixa pai distribudo
proporcionalmente para os elementos filho. Usando a propriedade -ms-flex, voc pode tornar os itens do flexbox
"flexveis", alterando sua largura ou altura para preencher o espao disponvel. Um flexbox distribui o espao livre
para seus itens proporcionalmente a sua flexibilidade positiva ou os reduz para evitar o estouro proporcional a sua
flexibilidade negativa.
Quando um elemento que contm a propriedade -ms-flex um item do flexbox, a propriedade -ms-flex
consultada em vez das propriedades width ou height para determinar o tamanho principal do elemento. (Se um
elemento no um item do flexbox, a propriedade -ms-flex no tem efeito.)

Propriedade

Descrio

-ms-flex

Especifica se a largura ou a altura de um elemento filho flexvel de

acordo com o espao disponvel no objeto. Esse valor tambm indica a
proporo de espao disponvel alocado para o elemento filho. Esta sua
sintaxe:
CSS

-ms-flex: <positive-flex> <negative-flex> <preferred-size>

Esta propriedade pode ser definida com qualquer destes valores ou

como none.
<positive-flex>
Um inteiro que define a flexibilidade positiva. Se omitida, a
flexibilidade positiva do elemento ser "1". Valores negativos so
invlidos.
<negative-flex>
Um inteiro que define a flexibilidade negativa. Se omitida, a
flexibilidade negativa do elemento ser "0". Valores negativos so
invlidos.
<preferred-size>
Define o tamanho preferencial do item do flexbox. Pode ser
qualquer valor vlido para as propriedades width ou height,
excluindo inherit. Se omitido, o tamanho preferencial ser "0px".
Se o componente <preferred-size> for auto em um filho de um

flexbox, o tamanho preferencial ser o valor da

propriedade width ou height do item do flexbox (o que for paralelo
ao eixo principal).
none
Este o valor inicial. Equivale a definir -ms-flex como "0 0
auto".

Agrupando elementos filho do flexbox

Voc pode agrupar elementos filho do flexbox usando um nmero de grupo para controlar a ordem em que cada
elementos renderizado ao longo do eixo do layout, mesmo que essa ordem seja diferente da ordem do DOM.
Para definir o agrupamento, use a seguinte propriedade:

Propriedade

Descrio

-ms-flexorder

Especifica o grupo ordinal ao qual um elemento do flexbox pertence.

Este inteiro identifica a ordem de exibio (ao longo do eixo definido
pela propriedade -ms-flex-direction) do grupo.
Os valores devem ser inteiros maiores que zero. O valor inicial dessa
propriedade "0".

A propriedade -ms-flex-order permite colocar os elementos em grupos ordinais, comeando com o grupo ordinal
0. Todos os elementos filho em cada grupo ordinal so renderizados ao longo do eixo do layout
especificado antes que qualquer um dos elementos filho do grupo ordinal seguinte seja renderizado. Portanto,
todos os elementos filho no grupo ordinal 0 so renderizados antes de qualquer um dos elementos filho no grupo
ordinal 1 e assim por diante. Elementos com grupos ordinais so renderizados na ordem do DOM. Por padro,
linhas adicionais so acrescentadas ao manter o sentido do bloco.
Por exemplo, esta marcao define quatro elementos filho e atribui um valor ordinal maioria deles usando a
propriedade -ms-flex-order:

child1 tem um valor de -ms-flex-order igual a "1"

child2 tem um valor de -ms-flex-order igual a "0", o valor inicial

child3 tem um valor de -ms-flex-order igual a "0"

child4 no tem uma propriedade -ms-flex-order, significando que recebe o valor inicial de -ms-flexorder igual a "0"
CSS

<style type="text/css">
#myFlexbox {
display: -ms-flexbox;
color: white;
font-size: 48px;
font-family: "Segoe UI", "Lucida Grande", Verdana, Arial, sans-serif;
text-align: left;
height: 200px;
border: none;
}
#child1 {
-ms-flex-order: 1;
background: #43e000;
padding: 20px;
}

#child2 {
-ms-flex-order: 0;
background: #166aff;
padding: 20px;
}
#child3 {
-ms-flex-order: 1;
background: #43e000;
padding: 20px;
}
#child4 {
background: #166aff;
padding: 20px;
}
</style>
</head>
<body>
<div id="myFlexbox">
<div id="child1">1</div>
<div id="child2">2</div>
<div id="child3">3</div>
<div id="child4">4</div>
</div>
</body>

child2 e child4 esto no grupo ordinal 0, e child1 e child3 esto no grupo ordinal 1. Como em cada grupo
ordinal, os elementos filho so renderizados de acordo com a ordem do DOM, esses elementos aparecem na
seguinte ordem no elemento do flexbox pai: child2, child4, child1, child3. Voc pode ver isso na seguinte
captura de tela:

Voc pode exibir essa pgina. ( necessrio o Internet Explorer 10 para visualizar essa pgina corretamente).

Tpicos relacionados
Layout de caixa flexvel