WDD 130: Fundamentos da Web

S04 Atividade de Aprendizagem: CSS Flex

Visão Geral

Páginas da web responsivas são páginas que ajustam automaticamente o próprio layout, conteúdo e elementos de design para proporcionar uma visualização ideal em diferentes tamanhos de tela e dispositivos, desde computadores desktop a tablets e celulares.

A propriedade flex para display no CSS facilita a criação e o controle de layouts responsivos, principalmente em um único contêiner horizontal ou vertical. Flexbox é um método de layout unidimensional para dispor itens em linhas ou colunas. Os itens são flexíveis para preencher espaços adicionais e encolhem para caber em espaços menores.

Os layouts em grade (grid), que serão abordados em outra atividade, também são usados para criar páginas da web responsivas. O layout Flexbox é mais apropriado para os componentes de uma página e layouts de pequena escala, enquanto o layout Grid é destinado a layouts de maior escala.

Preparação

Flexbox é um método de layout do CSS que ajuda a organizar itens em linhas ou colunas. O nome "flexbox" vem de "flexible box" (caixa flexível), pois deixa as caixas flexíveis e fáceis de posicionar. Em vez de usar regras de posicionamento complicadas, flexbox permite que você informe ao navegador como deseja que seus itens sejam organizados, e ele faz o trabalho para você.

Flexbox é especialmente útil quando você deseja centralizar itens, deixá-los com a mesma altura ou distribuir o espaço uniformemente entre eles. É ideal para barras de navegação, layouts de cards e designs responsivos que precisam funcionar em diferentes tamanhos de tela.

Como Flexbox Funciona?

Flexbox funciona com duas partes principais: um contêiner flexível (elemento pai) e itens flexíveis (elementos filhos). Ao usar display: flex em um contêiner, todos os elementos filhos diretos se tornam automaticamente itens flexíveis, podendo ser organizados com as propriedades do Flexbox.

Assista ao vídeo a seguir para aprender o básico sobre Flexbox:

Conforme mostrado no vídeo, abaixo estão as propriedades mais importantes que você usará com o Flexbox. Elas são aplicadas ao contêiner flexível (elemento pai):

• Contêineres flexíveis e itens flexíveis: O contêiner é o elemento pai e possui a declaração display: flex; . Os itens são filhos diretos do contêiner e podem ser alterados usando várias propriedades flexíveis.
• Flex direction: A propriedade flex-direction define a direção na qual os itens flexíveis são posicionados no contêiner flexível. Pode ser configurada para row, row-reverse, column ou column-reverse.
• Justify content: A propriedade justify-content alinha os itens flexíveis ao longo do eixo principal (horizontalmente em uma linha, verticalmente em uma coluna). Pode ser definida com valores como flex-start, flex-end, center, space-between ou space-around.
• Align items: A propriedade align-items alinha os itens flexíveis ao longo do eixo transversal (verticalmente em uma linha, horizontalmente em uma coluna). Pode ser definida com valores como flex-start, flex-end, center, baseline ou stretch.
• Place items: A propriedade place-items é uma abreviação de align-items e justify-items. Pode ser usada para controlar o alinhamento de itens dentro de um contêiner da grade.

O exemplo a seguir mostra como esses elementos podem ser aplicados a um contêiner para organizar seus elementos filhos em uma linha horizontal, centralizada horizontal e verticalmente.

.flex-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

Visualize e teste na prática um layout flexbox. Abra o repositório do seu curso no VS Code e navegue até a pasta semana04. Em seguida, abra, observe e teste os arquivos layout-flexbox.html e flexbox.css na subpasta estilos (use valores diferentes e veja os resultados).

Assista ao vídeo a seguir para aprender como usar o Flexbox para criar um menu:

Visualize e personalize na prática um menu com Flexbox. Na pasta semana04, abra os arquivos menu-flexbox.html e estilos/menu-flexbox.css. Altere os valores nesses arquivos e observe as mudanças na página.

Instruções da Atividade

1. Conclua o seguinte tutorial online sobre CSS Flexbox (24 Níveis): Flexbox Froggy