View on GitHub

aulas-programacao-web

Materiais de Aula - Programação de Computadores com tecnologias Web

Leiaute

📽 Veja esta vídeo-aula no Youtube

Flex

Historicamente diversas técnicas foram utilizadas para criação de leiautes em HTML/CSS. Utilizaremos neste curso a técnica de leiaute flexível, através da especificação flex.

Nesse método sempre temos os papéis do flex container (recipiente) e dos flex items (itens). Todos os elementos itens devem ser filhos do elemento container.

Ao atribuir display: flex ao flex container ele se comporta como um elemento em nível de bloco e seus filhos são agora flex items. Podemos mudar seu comportamentos alterando propriedades do container e dos itens.

Ex.:

Marcação:

<div class="meu-container">
    <div>Item 1</div>
    <div id="meu-item-especial">Item 2</div>
    <div>Item 3</div>
</div>

Estilo:

.meu-container {
    display: flex;
    /* estilização do flex-container */
}

.meu-container > * {
    /* estilização de todos os flex-items */
}

#meu-item-especial {
    /* estilização de um flex-item específico */
}

Comportamento de flex-items

Veja o seguinte exemplo:

Dois itens foram criados, e posicionados lado-a-lado, com o tamanho definido de acordo com seu conteúdo. Itens flex buscam ocupar o menor tamanho possível sem quebras de linha.

Perceba que ao adicionar mais itens, eles se redimensionam para caber no container:

Caso não seja possível, eles vazam:

A principal ideia aqui é que os elementos fluem pelo eixo principal, no caso o eixo das linhas (row).

Podemos controlar o eixo de fluxo através de flex-flow, que pode ser row (linhas) ou column (colunas):

Também podemos usar flex-flow para controlar o vazamento. Se indicarmos wrap os itens podem quebrar a “linha” (na verdade, o eixo principal).

Alinhamento no eixo principal

Podemos usar o alinhamento (ou justificação) para indicar como os itens se distribuem no espaço vazio em relação ao eixo principal.

Usamos a propriedade do container justify-content com os seguintes valores:

Todos os direitos W3C

Veja estes exemplos:

Alinhamento no eixo transversal

Caso os itens tenham alturas distintas entre si, ou não ocupem toda a altura do container, podemos acabar com espaços não ocupados no eixo transversal ao eixo principal. Nesse caso, alinhamos os itens usando a propriedade do container align-items com os seguintes valores:

Todos os direitos W3C

Veja estes exemplos:

Caso tenhamos quebra no eixo principal podemos controlar o espaço livre entre as “linhas” usando align-content:

Todos os direitos W3C

Veja estes exemplos:

Propriedades dos flex-items

Podemos configurar os itens individualmente, se necessário.

Veja este exemplo:

Agora, são configurados no container os alinhamentos em ambos os eixos:

E então, os segundo e quarto itens recebem uma alteração no alinhamento do eixo secundário através da propriedade align-self (equivalente a align-items mas exclusiva dos itens).

Controlando o tamanho ocupado pelos itens

Veja o exemplo a seguir:

Digamos que queremos ocupar todo o espaço disponível no container, em ambos os eixos. A maneira mais fácil de obter esse comportamento é usando a propriedade flex dos itens, com o valor 1.

Podemos ajustar a taxa de crescimento proporcionalmente em relação aos demais usando valores maiores em flex:

Percebam que 0 fez o terceiro item não crescer de maneira alguma. Dizemos que ele é inflexível.

Caso o espaço não seja suficiente, podemos controlar também a taxa de redução dos elementos. Veja o exemplo:

Ao segundo item foi dito para não crescer, mas reduzir se necessário (usando flex: 0 1; ou flex: initial;):

Ao segundo item foi dito crescer e reduzir, conforme necessário (usando flex: 1 1; ou flex: auto;):

Ao segundo item foi tornado totalmente inflexível, e foi indicada uma medida base (200px) para o eixo principal (usando flex: 0 0 200px; ou flex: none; flex-basis: 200px;):

Caso tenhamos quebra em mais de uma “linha”, para ocupar todos os espaços em todas as linhas precisamos torná-los totalmente flexíveis e usar uma medida base auto, como em flex: 1 1 auto;:

Elementos HTML semânticos

Ao criar leiautes, era comum na era HTML versão 4 fazer todos os elementos com divs e utilizar classes e identificadores com nomes indicando sua função na página.

<div id="cabecalho"></div>
<div id="menu"></div>
<div id="conteudo">
    <div class="post"></div>
    <div class="post"></div>
    <div class="post"></div>
</div>
<div id="rodape"></div>

Com o advento do HTML5 foram criadas tags semânticas com o mesmo comportamento de div (ou span), porém com semânticas comuns à maioria dos sites, facilitando assim a sua identificação. Sempre use tags semânticas quando possível.

<header></header>
<nav></nav>
<main>
    <article></article>
    <article></article>
    <article></article>
</main>
<footer></footer>


<article>
    <header>
        <h1></h1>
    </header>
    <div>
        <h2></h2>
        <p></p>
        <h2></h2>
        <p></p>
        <p></p>
    </div>
</article>

Há por volta de 100 tags semânticas no HTML. As mais comuns:

Em nível de bloco:

Em nível de linha:

Muitos desses elementos são estilizados na folha de estilos do navegador (user agent stylesheet), devendo se tomar cuidado para mantê-los consistentes entre todos os usuários.