Documente Academic
Documente Profesional
Documente Cultură
("Flexbox") no Internet
Explorer 10
Neste artigo
O continer 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>
Propriedade
Descrio
-ms-flexdirection
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>
Propriedade
Descrio
-ms-flexalign
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>
Propriedade
Descrio
-ms-flexpack
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
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>
Propriedade
Descrio
-ms-flexwrap
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>
<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>
Propriedade
Descrio
-ms-flex
Propriedade
Descrio
-ms-flexorder
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:
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