Escolhendo um layout (HTML)

[ Este artigo destina-se aos desenvolvedores do Windows 8.x e do Windows Phone 8.x que escrevem aplicativos do Windows Runtime. Se você estiver desenvolvendo para o Windows 10, consulte documentação mais recente]

Para fornecer a interface do usuário mais flexível e adaptável aos usuários do aplicativo do Tempo de Execução do Windows, você precisa primeiro decidir o modo de layout mais apropriado ao conteúdo e às exibições pelos quais o conteúdo poderá ser usado. Este tópico descreve os recursos de layout CSS3 (Folhas de Estilo em Cascata, Nível 3) com suporte nos aplicativos da Windows Store do Windows 8. Os layouts Caixa Flexível e Grade são úteis para criar layouts fluidos para aplicativos e controles personalizados, enquanto Várias Colunas e Regiões são mais úteis para definir o layout de texto e outros tipos de conteúdo de leitura.

Layout de Caixa Flexível

A Caixa Flexível (Flexbox) é um mecanismo de layout onde os elementos filho são organizados e dimensionados usando um sistema baseado em restrições que dê suporte ao dimensionamento flexível relativo e ao dimensionamento intrínseco. Os layouts de Caixa Flexível podem se adaptar a vários tamanhos de tela e permitem cenários de consumo de jornais, revistas digitais e outras mídias de impressão digital.

O layout Flexbox se destina à criação do layout de páginas da Web complexas e é especialmente útil para fazer a posição e o tamanho relativos dos elementos permanecerem constantes, mesmo quando os tamanhos de janela de tela e navegador variarem e mudarem. Isso 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 ao longo do 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 do posicionamento desses elementos na página – por exemplo, de cima para baixo, da esquerda para a direita, da direita para a esquerda, de baixo para cima.
• Reordenar os elementos na tela em uma ordem que seja diferente daquela especificada pelo DOM (Document Object Model).

Diferentemente da Grade, a Caixa Flexível não exige que os elementos filho estejam explicitamente posicionados no contêiner pai. Talvez você prefira usar a Grade ao criar contêineres de itens leves com um número dinamicamente determinado de elementos filho.

Para saber mais, veja Layout de Caixa Flexível ("Flexbox").

Alinhamento de grade

A Grade fornece um mecanismo para que os autores dividam o espaço disponível para layout em colunas e linhas usando um conjunto de comportamentos previsíveis de dimensionamento. Os autores podem então posicionar e dimensionar, com precisão, os elementos de blocos de construção do aplicativo fazendo referência às Linhas de Grade entre as colunas e linhas. Eles também podem definir e fazer referência a uma Célula de Grade, que é um espaço retangular que cobre uma interseção de colunas e linhas.

Como no Flexbox, a Grade permite mais fluidez de layout do que é possível com posicionamento usando flutuações ou script. Ele permite que você divida o espaço para grandes regiões de uma página da Web ou aplicativo Web, e defina o relacionamento entre as partes de um controle HTML em termos de tamanho, posição e camada. Isso remove a necessidade de criar um layout fixo, que não pode tirar proveito do espaço disponível na janela do navegador. Como a Grade permite alinhar elementos em colunas e linhas, mas não tem nenhuma estrutura de conteúdo, ela também permite cenários que não são possíveis com tabelas HTML. Usando a Grade em conjunto com consultas de mídia, você pode habilitar o layout para adaptar-se perfeitamente às mudanças no fator forma do dispositivo, na orientação, no espaço disponível e muito mais. Como a Grade controla tanto o layout horizontal quanto vertical, convém usar a Grade em vez da Caixa Flexível par ao layout de aplicativo de nível superior.

Para saber mais, veja Alinhamento da grade.

Layout com várias colunas

Os layouts com várias colunas oferecem suporte ao fluxo de conteúdo de uma coluna para outra para um número arbitrário de colunas.

O layout com várias colunas permite que o conteúdo seja transmitido para várias colunas que retêm uma lacuna e uma regra opcional entre elas. Ele também possibilita variar o número de colunas com base no tamanho da janela do navegador. Um elemento com várias colunas é definido pelo W3C como um elemento cuja propriedade column-width ou column-count não é definida como auto e, portanto, atua como um contêiner para layout com várias colunas. O layout com várias colunas apresenta a caixa de coluna, que é definida como um novo tipo de contêiner entre a caixa de conteúdo e o conteúdo. Os elementos de várias colunas podem ter várias linhas de caixas de colunas. As linhas são divididas por elementos que abrangem colunas (elementos que têm column-span:all especificado). As linhas são ordenadas na direção do elemento com várias colunas. As caixas de colunas adjacentes são separadas por uma lacuna de coluna, que opcionalmente pode conter uma regra de coluna.

Para saber mais, veja Layout com várias colunas.

Layout de regiões

O layout de regiões é um recurso de layout de página que permite obter um único fluxo de conteúdo e segmentar esse fluxo em vários contêineres vazios em um modelo HTML. Os modelos HTML são documentos que em grande parte estão vazios de conteúdo original, mas são compostos principalmente de contêineres vazios dimensionados e posicionados para dar um layout específico ao conteúdo recebido. Você pode usar regiões para permitir um fluxo de texto entre várias colunas explicitamente dimensionadas e posicionadas usando CSS (Folhas de Estilo em Cascata), criando um layout em estilo de jornal ou revista.

Para saber mais, veja Regiões.

Laboratórios práticos do Windows 8

Se quiser tentar trabalhar com layouts de aplicativos e outros recursos importantes do Windows 8, baixe os laboratórios práticos do Windows 8. Com esses laboratórios, você terá uma introdução modular e passo a passo à criação de um exemplo de aplicativo da Windows Store na linguagem de programação que preferir (JavaScript e HTML ou C# e linguagem XAML).

Tópicos relacionados

Definindo o layout da interface do usuário

Definindo o layout de uma página de aplicativo

Diretrizes de experiência do usuário para layout e dimensionamento