Windows Dev Center

Informações
O tópico solicitado está sendo mostrado abaixo. No entanto, este tópico não está incluído nesta biblioteca.

Layout de caixa flexível ("Flexbox") no Internet Explorer 10

Observação  Esse conteúdo se aplica à Caixa Flexível CSS no Internet Explorer 10. Para obter uma visão geral mais atual do flexbox, consulte Layout de caixa flexível.
Cuidado  O Internet Explorer 11 não dá mais suporte ao prefixo de fornecedor da Microsoft ("-ms-") das propriedades do flexbox. Em vez disso, você deve usar os nomes sem prefixo, preferíveis para mais conformidade com padrões e futura compatibilidade. Veja Atualizações do layout de caixa flexível ("Flexbox") para acessar um resumo das alterações e práticas recomendadas.

O Internet Explorer 10 e os aplicativos da Windows Store em JavaScript para Windows 8 são compatíveis com o Módulo de Layout de Caixa Flexível CSS ("Flexbox"). O módulo flexbox era, no momento da elaboração deste documento, uma Versão Preliminar de Trabalho do W3C (World Wide Web Consortium). (A implementação do flexbox no Internet Explorer 10 é baseada na versão de 22 de março de 2012 da Versão Preliminar de Trabalho do Flexbox.) O Flexbox se soma aos quatro modos de layout básicos definidos na CSS2.1 (Folhas de Estilos em Cascata Nível 2, Revisão 1) (e habilitados por meio da propriedade display): layout em bloco, layout embutido, layout de tabela e layout posicionado. O layout Flexbox destina-se à criação de layouts para páginas da Web mais complexas. É especialmente útil para fazer a posição 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 dependência das flutuações, que são mais complicadas de posicionar e dimensionar corretamente.

O layout Flexbox leva em conta o espaço disponível ao definir as dimensões da caixa, permitindo assim tamanhos e posicionamento relativos. Por exemplo, você pode garantir que o espaço extra em branco em uma janela do navegador seja distribuído igualmente ao tamanho de vários elementos filho, e que esses elementos filho fiquem centralizados no meio do bloco de conteúdo.

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 posição e tamanho em relação uns aos outros.
  • Especificar como o excesso de espaço junto ao eixo do layout (horizontal ou vertical) de uma série de elementos pode ser alocado proporcionalmente para aumentar o tamanho dos elementos.
  • Especificar como o excesso de espaço junto ao eixo do layout de uma série de elementos pode ser alocado para cair antes, depois ou entre a série de elementos.
  • Especificar como o excesso de espaço perpendicular ao eixo do layout de um elemento pode ser moldado em torno do elemento — por exemplo, espaço extra acima ou abaixo de botões que foram dispostos lado a lado.
  • Controlar a direção em que os elementos são dispostos na página — 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 são especificados pelo DOM (Document Object Model).

O contêiner do flexbox

Para habilitar o layout flexbox, primeiro você precisa criar um contêiner do flexbox. Para fazer isso, defina a propriedade display de um elemento como "-ms-flexbox" (para um contêiner do flexbox no nível de bloco) ou "-ms-inline-flexbox" (para um contêiner do flexbox embutido). (Devido ao status de versão preliminar do Módulo de Layout de Caixa Flexível CSS, esse valor e todas as propriedades nesta seção devem ser usados com o prefixo de fornecedor específico 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 código a seguir cria um contêiner do flexbox em nível de bloco no elemento com a ID "myFlexbox":


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


Definindo a orientação do flexbox

Ao criar um contêiner do flexbox, você também pode definir sua orientação — ou seja, especificar se seus filhos são 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:

PropriedadeDescrição

-ms-flex-direction

Especifica a orientação no layout de todos os elementos filho do objeto.

Os valores possíveis para esta propriedade são as seguintes palavras-chave:

row

Este é o valor inicial. Elementos filho são exibidos na mesma ordem em que são declarados no documento de origem, da esquerda para a direita.

Exemplo de -ms-box-orient:horizontal
column

Elementos filho são exibidos na mesma ordem em que são declarados no documento de origem, de cima para baixo.

Exemplo de -ms-box-orient:vertical
row-reverse

Elementos filho são exibidos na ordem inversa em que são declarados no documento de origem, da direita para a esquerda.

Exemplo de -ms-box-direction:normal
column-reverse

Elementos filho são exibidos na ordem inversa em que são declarados no documento de origem, de baixo para cima.

inherit

Elementos filhos são exibidos na mesma ordem como o 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.


<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 contêiner do flexbox, você também pode definir seu alinhamento— isso é, especificar em que sentido seus filhos devem ser mostrados, mas perpendicular ao eixo do layout definido pela propriedade -ms-flex-direction.

PropriedadeDescrição

-ms-flex-align

Especifica o alinhamento (perpendicular ao eixo de layout definido pela -ms-flex-direction propriedade) de elementos filho do objeto.

Os valores possíveis para esta propriedade são as seguintes palavras-chave: Observe que essas são writing-mode palavras-chave dependentes; a borda esquerda do elemento pai e dos elementos filho e a borda direita dos elementos filho dependem da direção do layout. Por exemplo, para um layout da esquerda para a direita, a borda esquerda é a borda superior do elemento pai; para criar um layout de cima para baixo, a borda esquerda é a borda esquerda do elemento pai e assim por diante. Da mesma forma, para um layout da esquerda para a direita, a borda direita de elementos filho é a borda inferior; para criar um layout de cima para baixo, a borda direita de elementos filho é a borda direita e assim por diante.

start

Se o elemento pai tem um valor calculado para -ms-flex-direction de row ou column, a borda esquerda (ou linha de base) de cada elemento filho é alinhada à borda esquerda do objeto. Todo o espaço restante, perpendicular ao eixo de layout, é colocado após a borda direita de cada elemento filho.

Se o elemento pai tem um valor calculado para -ms-flex-direction de row-reverse ou column-reverse, a borda direita (ou linha de base) de cada elemento filho é alinhada à borda direita do objeto. Todo o espaço restante, perpendicular ao eixo de layout, é colocado antes da borda esquerda de cada elemento filho.

Exemplo de -ms-box-align:before
end

Se o elemento pai tem um valor calculado para -ms-flex-direction de row ou column, a borda direita de cada elemento filho é alinhada à borda direita do objeto. Todo o espaço restante, perpendicular ao eixo de layout, é colocado antes da borda esquerda de cada elemento filho.

Se o elemento pai tem um valor calculado para -ms-flex-direction de row-reverse ou column-reverse, a borda esquerda de cada elemento filho é alinhada à borda esquerda do objeto. Todo o espaço restante, perpendicular ao eixo de layout, é colocado após a borda direita de cada elemento filho.

Exemplo de -ms-box-align:after
center

Cada elemento filho é centralizado entre as bordas esquerda e direita do objeto. Todo o espaço restante, perpendicular ao eixo de layout, é distribuído uniformemente antes e depois de cada filho.

Exemplo de -ms-box-align:middle
stretch

Este é o valor inicial. Cada elemento filho é ampliado para preencher completamente o espaço disponível perpendicular ao eixo de layout. Se definido, a propriedade max-width ou a max-height para um elemento filho tem precedência e o layout segue a regra start.

Exemplo de -ms-box-align:stretch
baseline

As linhas de base (borda esquerda ou borda direita dependendo da propriedade -ms-flex-direction) de todos os elementos filho são alinhadas umas com as outras.

O elemento filho que ocupa mais espaço, perpendicular ao eixo de layout, segue a regra start; as linhas de base de todos os elementos restantes são então alinhadas com a linha de base desse elemento.

Exemplo de -ms-box-align:baseline

 

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


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


Distribuindo espaços em branco entre elementos filho do flexbox

Você pode especificar a distribuição de espaços em branco entre os elementos filho do flexbox usando esta propriedade:

PropriedadeDescrição

-ms-flex-pack

Especifica como o espaço excedente é distribuído (ao longo do eixo definido pela propriedade -ms-flex-direction) entre os elementos filho do objeto.

Os valores possíveis para esta propriedade são as seguintes palavras-chave: Observe que essas são palavras-chave dependentes writing-mode; as bordas inicial e final do elemento pai e dos elementos filho dependem da direção do layout. Por exemplo, para um layout da esquerda para a direita, a borda inicial é a borda esquerda do elemento pai. Para criar 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 é colocada no início do elemento pai; a borda inicial do próximo elemento filho é colocada junto à borda final do primeiro elemento filho; e assim por diante ao longo da direção do eixo de layout. Todo o espaço remanescente ao longo do eixo de layout é colocado no final do eixo de layout.

Exemplo de -ms-box-pack:start
end

A borda final do primeiro elemento filho é colocada ao final do elemento pai. A borda final do próximo elemento filho é colocada junto à borda inicial do primeiro elemento filho, e assim por diante ao longo da direção do eixo de layout. Todo o espaço remanescente ao longo do eixo de layout é colocado no início do eixo de layout.

Exemplo de -ms-box-pack:end
center

Todos os elementos filho são colocados borda com borda, conforme descrito nas descrições para as palavras-chave start ou end. No entanto, o grupo de elementos filho é centralizado entre as bordas inicial e final do elemento pai para que todo o espaço restante seja distribuído uniformemente antes do primeiro elemento filho e depois do último elemento filho.

Exemplo de -ms-box-pack:center
justify

A borda inicial do primeiro elemento filho é colocada no início do elemento pai. A borda final do último elemento filho é colocada de borda com borda ao fim da caixa pai e todos os filhos restantes são colocados entre o primeiro e o último elemento filho, de modo que qualquer espaço remanescente ao longo do eixo do layout seja distribuído uniformemente entre os elementos filho.

Exemplo de -ms-box-pack:justify

 

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


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


Habilitando a quebra automática de elementos filho

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

PropriedadeDescrição

-ms-flex-wrap

Especifica se os elementos filho quebram em várias linhas ou colunas com base no espaço disponível no objeto.

Os valores possíveis para esta propriedade são as seguintes palavras-chave:

none

Este é o valor inicial. Todos os elementos filho são exibidos em uma única linha ou coluna. A propriedade overflow do objeto determina se os elementos filho são ocultos, recortados ou roláveis.

wrap

Os elementos filho são ajustados e exibidos em colunas ou linhas paralelas sucessivas. O objeto se expande em altura ou largura, perpendicular ao eixo definido pela propriedade writing-mode, para acomodar as linhas ou colunas adicionais.

Exemplo de -ms-box-line-progression:normal
wrap-reverse

Elementos filho são ajustados e exibidos em colunas ou linhas paralelas sucessivas em ordem inversa. O objeto se expande em altura ou largura, perpendicular ao eixo definido pela propriedade writing-mode, para acomodar as linhas ou colunas adicionais.

Exemplo de -ms-box-line-progression:reverse

 

Esteja ciente de que o Internet Explorer 10 tenta encaixar os elementos filho de uma caixa pai no menor número de linhas possível, reduzindo todas as caixas a seu tamanho mínimo. Um único elemento que não couber em sua linha será recortado no final da linha.

Por padrão, linhas adicionais são acrescentadas para reter o sentido do bloco. Nos layouts da esquerda para a direita e da direita para a esquerda, novas linhas são 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 não à 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 configurações específicas.

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


<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 contêiner do flexbox, pode adicionar elementos filho a ele. Para adicionar um elemento filho ao contêiner do flexbox, converta o elemento em um filho imediato do elemento do flexbox, como mostra a seguinte marcação:


<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 espaço excedente ao longo do eixo do layout de uma caixa pai é distribuído proporcionalmente para os elementos filho. Usando a propriedade -ms-flex, você pode tornar os itens do flexbox "flexíveis", alterando sua largura ou altura para preencher o espaço disponível. Um flexbox distribui o espaço 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 contém 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 não ó um item do flexbox, a propriedade -ms-flex não tem efeito.)

PropriedadeDescrição

-ms-flex

Especifica se a largura ou altura de um elemento filho é flexível com base no espaço disponível no objeto. Este valor também indica a proporção de espaço disponível que é alocada para o elemento filho. Sua sintaxe é a seguinte:


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

Esta propriedade pode ser definida com qualquer um dos valores a seguir ou com none.

<positive-flex>

Um inteiro que define a flexibilidade positiva. Se omitida, a flexibilidade positiva do elemento é "1". Um valor negativo não é válido.

<negative-flex>

Um inteiro que define a flexibilidade negativa. Se omitida, a flexibilidade negativa do elemento é "0". Um valor negativo não é válido.

<preferred-size>

Define o tamanho preferencial do item do flexbox. Pode ser qualquer valor válido para a propriedade width ou height, exceto inherit. Se omitido, o tamanho preferencial é "0px". Se o componente <preferred-size> é auto em um filho de um flexbox, o tamanho preferencial é o valor da propriedade width ou height do item do flexbox (aquela que for paralela ao eixo principal).

none

Este é o valor inicial. Equivalente a configurar -ms-flex para "0 0 auto".

 

Agrupando elementos filho do flexbox

Você pode agrupar elementos filho do flexbox usando um número 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:

PropriedadeDescrição

-ms-flex-order

Especifica o grupo ordinal ao qual um elemento do flexbox pertence. Este inteiro identifica a ordem de exibição (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, começando com o grupo ordinal 0. Todos os elementos filho em cada grupo ordinal são 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 são renderizados antes de qualquer um dos elementos filho no grupo ordinal 1 e assim por diante. Elementos com grupos ordinais são renderizados na ordem do DOM. Por padrão, linhas adicionais são acrescentadas ao manter o sentido do bloco.

Por exemplo, esta marcação 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 não tem uma propriedade -ms-flex-order, significando que recebe o valor inicial de -ms-flex-order igual a "0"

<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 estão no grupo ordinal 0, e child1 e child3 estão no grupo ordinal 1. Como em cada grupo ordinal, os elementos filho são 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:

Captura de tela do exemplo anterior em uma janela do navegador

Você pode exibir essa página. (É necessário o Internet Explorer 10 para visualizar essa página corretamente).

Tópicos relacionados

Layout de caixa flexível

 

 

Mostrar:
© 2015 Microsoft