Como construir um layout básico do Flexbox: um tutorial com exemplos

Antes do advento do Flexbox, o método preferido de layout de elementos DOM em um documento era usar float . O atributo float descreve como e onde um contêiner seria colocado no DOM, como:

.container { flutuar: esquerda | direito
}

Quando foi introduzido pela primeira vez em 2009, o Flexbox tornou muito mais simples para os desenvolvedores colocar e organizar elementos em aplicativos e páginas da web responsivos. Só ganhou popularidade desde então. Hoje, Flexbox ainda serve como o sistema de layout principal para a maioria das páginas da web modernas.

Neste tutorial, mostraremos como alinhar elementos e distribuir espaço em um layout Flexbox. Para demonstrar como o Flexbox funciona, vamos percorrer o processo de construção e manipulação de elementos em uma IU de calculadora.

Aqui está o que vamos cobrir:

• O que é Flexbox?
• Projetando uma IU com Flexbox
• Adicionando um flex container
• Adicionando conteúdo a um flex container
• Disposição das telas
• Adicionando elementos a um layout Flexbox
• Elementos de estilo no Flexbox
• Tornando um layout Flexbox responsivo

O que é Flexbox?

O Flexbox permite fazer o layout de componentes e elementos da web em um documento sem afetar a marcação subjacente. Ele começa com um contêiner flex ; a partir daí, você pode definir como o conteúdo é disposto horizontalmente e verticalmente. O conteúdo do flex container é chamado de flex items, que podem se tornar flex containers.

Para tornar um elemento um flex container, declare display: flex; ou flex: 1; no elemento:

.flex-container { display: flex;
}

Podemos então dizer ao sistema como os filhos do flex container devem ser dispostos: da esquerda para a direita, da direita para a esquerda, de cima para baixo ou mesmo de baixo para cima:

.flex-container { display: flex; direção flexível: linha | coluna | linha invertida | coluna invertida
}

Para especificar como e onde a estratificação dos flex items começará a partir do eixo principal do flex-container :

.flex-container { justificar-conteúdo: centro | fim | começar | flex-end | flex-start |...
}

Também podemos especificar como e onde a estratificação dos itens flexíveis começará a partir do eixo cruzado do flex-container :

.flex-container { alinhar-itens: centro | fim | começar | flex-end | flex-start |...
}

O Flexbox tem muitas propriedades que podemos usar para definir o layout exato que desejamos. Neste tutorial, mostraremos como usar as propriedades básicas descritas acima para projetar uma interface de calculadora simples.

Nosso produto acabado terá a seguinte aparência:

Projetando uma IU com Flexbox

Começaremos criando um arquivo HTML. Chamei o meu de calc.html . Abra o arquivo HTML em seu editor de código favorito.

Comece adicionando algumas tags HTML básicas:

Definimos o título da página como Calculadora (Flexbox) . Em seguida, definimos a largura da janela de visualização da página para obter o tamanho da largura do dispositivo em que está carregada. Se visualizado em uma área de trabalho, a largura da página será igual à largura da área de trabalho. O mesmo se aplica quando a página é visualizada em um telefone.

Vamos tornar a cor de fundo do corpo cinza. Também definiremos a largura para ocupar toda a largura do dispositivo. Para fazer isso, temos que adicionar a tag style e colocar nosso código CSS lá.

Usamos a unidade de porcentagem para definir a largura do corpo e especificamos a cor de fundo cinza usando o valor hexadecimal. Aqui está o resultado:

Adicionando um flex container

A próxima etapa é adicionar um contêiner. Nosso contêiner flexível vai esticar a largura do corpo e colocar seu item no centro.

Definimos o container para ser um flex container. Em seguida, definimos a largura para herdar o tamanho de seu pai. Este será o corpo e, como o corpo tem sua largura definida como 100 por cento, o contêiner herdará o valor e definirá sua largura como 100 por cento, ocupando toda a largura do dispositivo.

O flex-direction: column define seu conteúdo para ser disposto de cima para baixo. O justify-content: center; distribui os elementos ao longo do centro do eixo principal do contêiner.

O margin-top: 15px; define a espessura da margem superior do contêiner para 15px . Isso faz com que o contêiner se ajuste 15 pixels para baixo. O align-items: center; define que seus flex items estão alinhados ao longo do centro do eixo transversal da linha flexível do contêiner. Isso fará com que a calculadora comece no meio da página.

Adicionando conteúdo a um flex container

Vamos colocar um wrapper, div , dentro do div # container .

Este wrapper é onde os elementos da calculadora serão colocados. Definimos a largura para expandir 500px de largura. O invólucro manterá a tela da calculadora e os botões de cima para baixo.

Nossa calculadora será dividida em colunas. Cada coluna será um flex container que exibirá flex items em uma linha. A primeira coluna conterá a tela de entrada da calculadora e a próxima a tela de resultados da calculadora. As colunas subsequentes conterão os botões (quatro botões em uma coluna).

Vamos adicionar um estilo à classe .col :

Definimos largura como 500px , que é o tamanho que queremos que nossa calculadora tenha. Definimos display: flex; , que define a classe de linha como um flex container.

Definimos os itens flexíveis para serem dispostos da esquerda para a direita: flex-direction: row; . Também posicionamos os flex items partindo do centro, tanto do eixo cruzado quanto do eixo principal, declarando justify-content: center; e align-items: center; .

Disposição das telas

Agora é hora de criar o layout das telas e botões dentro do wrapper # div . Começaremos com duas telas: a tela de entrada e a tela de resultados.

A tela de resultados é o div # result e a tela de entrada é a div # expression . Cada um é renderizado em um div # col separado.

A seguir, definiremos o estilo da div # expression e div # result :

.expression { cor de fundo: branco; largura: herdar; altura: 100px; tamanho da fonte: 50px; border-top: 1px cinza sólido; border-right: 1px cinza sólido; borda esquerda: cinza sólido de 1 px;
}
.result { largura: herdar; margin-bottom: 12px; altura: 54px; cor de fundo: branco; borda inferior: cinza sólido de 1 px; border-right: 1px cinza sólido; borda esquerda: cinza sólido de 1 px;
}

Definimos a cor do plano de fundo como branco e a largura para obter o valor do pai. Em nosso caso, este é o div # wrapper , cuja largura é 500px . Portanto, a largura leva 500 pixels para abranger a largura do pai. A altura de div # expression é 100px e div # result é 54px .

Elaboramos desta forma porque a tela de entrada deve ter uma altura maior do que a tela de resultado e ambas devem ter unidades de 154px juntas. Definimos o tamanho da fonte de div # expression como 50px porque deve ser mais ousado e maior do que a tela de resultado.

A seguir, marcamos as bordas das telas. As bordas superior direita e esquerda de div # expression são marcadas como 1px e têm color: solid gray . Para div # result , a borda inferior direita-esquerda é marcada como 1px e tem uma cor cinza sólido. Omitimos a borda inferior em div # expression e a borda superior em div # result para que ambas aparecessem como uma.

Aqui está o resultado:

Adicionando elementos a um layout Flexbox

Para esta etapa, definiremos os botões em nosso layout Flexbox.

A IU da calculadora terá botões para os seguintes caracteres: 1, 2, 3, 4, 5, 6, 7, 8, 9, 0, *,-, +,/, CLR e=.

Definiremos os botões da seguinte maneira em nosso layout Flexbox:

• 1, 2 e 3 em um div#col
• 4, 5, 6 e + em outro div#col
• 7, 8, 9 e * em outro div#col
• CLR, 0,=, e/em outro div#col

        
 
 
 
 
 
 
 
 
 
 
  1   2   3  - 
 
  4   5   6   +  
 
  7   8   9   *  
 
  CLR   0  = / 
 
 
 
 

Aqui está o resultado:

Isso parece ótimo, exceto que nossos botões são minúsculos. Nada que não possamos corrigir com um pouco de estilo.

Elementos de estilo no Flexbox

Vamos adicionar um estilo aos nossos elementos de botão:

 botão { margem direita: 2px; margem superior: 2px; largura: herdar; peso da fonte: 700; borda: 2px cinza sólido; margin-bottom: 2px; tamanho da fonte: 43px; alinhamento de texto: centro;
}

O código CSS acima afetará todos os botões da página.

Na área do botão, definimos os valores de espessura inferior, superior e direito como 2px cada. Dessa forma, eles não são tão compactados. Definimos sua largura para herdar seus valores de seus pais. O pai é div # col , que tem uma largura 500px herdada de seu pai para div # wrapper .

Como existem quatro botões em um div # col , cada botão não terá o valor de largura de 500px , embora cada botão herde 500px . Em vez disso, a largura de 500 pixels será compartilhada igualmente entre os quatro botões.

 @media (largura máxima: 500px) {
}

 @media (largura máxima: 500px) { .embrulho { largura: 100%; }
}

 @media (largura máxima: 500px) { .embrulho { largura: 100%; } .container { largura: 100%; }
}

 @media (largura máxima: 500px) { .embrulho { largura: 100%; } .container { largura: 100%; } .col { largura: 100%; }
}

 @media (largura máxima: 500px) { .embrulho { largura: 100%; } .container { largura: 100%; } .col { largura: 100%; } corpo { largura: herdar; }
}

        
 
 
 
 
 
 
 
 
 
 
  1   2   3  - 
 
  4   5   6   +  
 
  7   8   9   *  
 
  CLR   0  = /