Fundamentos de Layout CSS

Introdução

Bem-vindo ao laboratório de Fundamentos de Layout CSS! Nesta sessão prática, você explorará os fundamentos do CSS Flexbox, um poderoso modelo de layout que oferece uma maneira eficiente de organizar, alinhar e distribuir espaço entre itens em um contêiner.

Ao longo deste laboratório, você trabalhará com um arquivo HTML pré-configurado (index.html) e um arquivo CSS (style.css). Sua tarefa será modificar o arquivo style.css para manipular o layout dos elementos na página. Você poderá ver suas alterações em tempo real alternando para a aba Web 8080 no ambiente do laboratório.

Você aprenderá a:

• Inicializar um contêiner flexível (flex container).
• Alinhar itens ao longo do eixo principal usando justify-content.
• Alinhar itens ao longo do eixo transversal usando align-items.
• Alterar a direção do layout com flex-direction.
• Permitir que os itens se quebrem em várias linhas usando flex-wrap.

Vamos começar!

Definir display flex em um elemento container

Nesta etapa, você começará transformando um elemento de nível de bloco padrão em um contêiner flexível (flex container). Este é o passo fundamental para criar qualquer layout flexbox.

A propriedade display: flex; é aplicada a um elemento pai (o contêiner) para habilitar um contexto flexível para todos os seus filhos diretos (os itens). Uma vez aplicada, os filhos se organizam automaticamente em uma linha.

Primeiro, abra o arquivo style.css no explorador de arquivos no lado esquerdo da sua tela.

Em seguida, localize a regra CSS .container. Adicione a propriedade display: flex; dentro desta regra.

.container {
  border: 2px solid #333;
  padding: 10px;
  margin-top: 20px;
  background-color: #f0f0f0;
  /* We will add flex properties here */
  display: flex;
}

Após adicionar o código, salve o arquivo. Agora, alterne para a aba Web 8080 para ver o resultado. Você notará que as caixas numeradas, que anteriormente estavam empilhadas verticalmente, agora estão dispostas horizontalmente em uma única linha.

Usar a propriedade justify-content com space-between

Nesta etapa, você aprenderá a controlar o alinhamento dos itens ao longo do eixo principal (horizontalmente, por padrão) usando a propriedade justify-content. Esta propriedade ajuda a distribuir o espaço livre extra no contêiner.

Usaremos o valor space-between, que distribui os itens uniformemente. O primeiro item é posicionado no início do contêiner, o último item está no final, e o espaço restante é distribuído igualmente entre os itens.

No seu arquivo style.css, adicione a propriedade justify-content: space-between; à regra .container.

.container {
  border: 2px solid #333;
  padding: 10px;
  margin-top: 20px;
  background-color: #f0f0f0;
  display: flex;
  justify-content: space-between;
}

Salve o arquivo e verifique a aba Web 8080. Você verá que os itens flexíveis agora estão distribuídos por toda a largura do contêiner, com espaçamento igual entre eles.

Aplicar a propriedade align-items com center

Nesta etapa, você aprenderá a alinhar os itens ao longo do eixo transversal (verticalmente, por padrão) usando a propriedade align-items.

Para ver o efeito do alinhamento vertical, primeiro precisamos dar uma altura ao nosso contêiner. Em seguida, usaremos o valor center para align-items para centralizar verticalmente os itens dentro do contêiner.

No seu arquivo style.css, adicione uma height e a propriedade align-items: center; à regra .container.

.container {
  border: 2px solid #333;
  padding: 10px;
  margin-top: 20px;
  background-color: #f0f0f0;
  display: flex;
  justify-content: space-between;
  height: 200px;
  align-items: center;
}

Salve o arquivo e visualize o resultado na aba Web 8080. O contêiner agora está mais alto, e todos os itens flexíveis estão perfeitamente centralizados no meio do espaço vertical.

Implementar a propriedade flex-direction com column

Nesta etapa, você mudará a direção do eixo principal de horizontal para vertical usando a propriedade flex-direction.

Por padrão, a direção flex é row. Ao defini-la como column, você pode empilhar os itens flex verticalmente. Quando você muda a direção flex para column, o eixo principal se torna vertical e o eixo transversal se torna horizontal. Isso significa que justify-content agora controlará o alinhamento vertical, e align-items controlará o alinhamento horizontal.

No seu arquivo style.css, adicione a propriedade flex-direction: column; à regra .container.

.container {
  border: 2px solid #333;
  padding: 10px;
  margin-top: 20px;
  background-color: #f0f0f0;
  display: flex;
  justify-content: space-between;
  height: 400px; /* Vamos aumentar a altura para melhor visualização */
  align-items: center;
  flex-direction: column;
}

Nota: Aumentamos a altura para 400px para visualizar melhor o efeito de justify-content em um layout de coluna.

Salve o arquivo e observe as mudanças na aba Web 8080. Os itens agora estão empilhados em uma única coluna. Observe como justify-content: space-between agora adiciona espaço verticalmente entre os itens, e align-items: center os centraliza horizontalmente.

Adicionar propriedade flex-wrap com wrap para quebra de linha

Nesta etapa final, você aprenderá a lidar com casos em que os itens flex excedem o contêiner. A propriedade flex-wrap permite que os itens quebrem para uma nova linha em vez de encolherem ou transbordarem.

Para demonstrar isso, voltaremos a um layout baseado em linha e definiremos uma largura fixa no contêiner que é muito estreita para conter todos os itens em uma única linha.

Primeiro, vamos limpar a regra .container removendo as propriedades das etapas anteriores (justify-content, align-items, flex-direction e height). Em seguida, adicione uma width fixa e a propriedade flex-wrap: wrap;.

Atualize sua regra .container em style.css para que fique assim:

.container {
  border: 2px solid #333;
  padding: 10px;
  margin-top: 20px;
  background-color: #f0f0f0;
  display: flex;
  width: 450px; /* Define uma largura fixa para forçar a quebra de linha */
  flex-wrap: wrap;
}

Salve o arquivo e atualize a aba Web 8080. Você verá que os itens flex que não cabem na primeira linha foram para uma segunda linha. Isso é essencial para criar layouts responsivos que se adaptam a diferentes tamanhos de tela.

Resumo

Parabéns por completar o laboratório CSS Layout Basics! Você aprendeu com sucesso os conceitos centrais do CSS Flexbox e os aplicou para criar layouts flexíveis e responsivos.

Neste laboratório, você praticou:

• display: flex;: Para criar um contêiner flex.
• justify-content: Para alinhar itens ao longo do eixo principal.
• align-items: Para alinhar itens ao longo do eixo transversal.
• flex-direction: Para definir a direção do eixo principal (linha ou coluna).
• flex-wrap: Para permitir que os itens quebrem em várias linhas.

Essas propriedades são os blocos de construção do design web moderno. Encorajamos você a continuar experimentando diferentes valores para essas propriedades para solidificar ainda mais seu entendimento do Flexbox.