Distribuição Uniforme de Filhos: Domínio de CSS

Introdução

Neste laboratório, exploraremos os fundamentos da programação CSS e aprenderemos como aplicar estilos a documentos HTML. Através de uma série de exercícios práticos, você aprenderá como criar e modificar regras CSS, usar seletores para direcionar elementos específicos e aplicar estilos a texto, fundos e bordas. Ao final deste laboratório, você terá uma sólida compreensão de CSS e poderá usá-lo para criar páginas web visualmente atraentes.

Este é um Lab Guiado, que fornece instruções passo a passo para ajudá-lo a aprender e praticar. Siga as instruções cuidadosamente para completar cada etapa e ganhar experiência prática. Dados históricos mostram que este é um laboratório de nível iniciante com uma taxa de conclusão de 100%. Recebeu uma taxa de avaliações positivas de 100% dos estudantes.

Distribuição Uniforme de Filhos (Evenly Distributed Children)

index.html e style.css já foram fornecidos na VM.

Para distribuir uniformemente os elementos filhos dentro de um elemento pai, use o layout flexbox, definindo a propriedade display do elemento pai como flex. Para distribuir os filhos horizontalmente com espaço igual entre eles, use justify-content: space-between. Para distribuir os filhos com espaço ao redor deles, use justify-content: space-around. Aqui está um exemplo:

<div class="evenly-distributed-children">
  <p>Item1</p>
  <p>Item2</p>
  <p>Item3</p>
</div>

.evenly-distributed-children {
  display: flex;
  justify-content: space-between;
}

Por favor, clique em 'Go Live' no canto inferior direito para executar o serviço web na porta 8080. Em seguida, você pode atualizar a aba Web 8080 para visualizar a página web.

Resumo

Parabéns! Você concluiu o laboratório Distribuição Uniforme de Filhos (Evenly Distributed Children). Você pode praticar mais laboratórios no LabEx para aprimorar suas habilidades.