LabEx
EntrarJunte-se

Técnicas de Centralização com Flexbox Responsivo

Beginner

This tutorial is from open-source community. Access the source code

Introdução

Neste laboratório, exploraremos o conceito de centralização com flexbox em CSS. Você aprenderá como centralizar horizontalmente e verticalmente elementos filhos dentro de um elemento pai usando flexbox. Ao final deste laboratório, você será capaz de criar layouts responsivos e visualmente atraentes usando técnicas de centralização com flexbox.

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 94%. Recebeu uma taxa de avaliações positivas de 100% dos estudantes.

Centralização com Flexbox

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

Para centralizar um elemento filho tanto horizontalmente quanto verticalmente dentro de um elemento pai usando flexbox, siga estes passos:

  1. Crie um layout flexbox definindo a propriedade display do elemento pai como flex.
  2. Use a propriedade justify-content para centralizar o filho horizontalmente, definindo seu valor como center.
  3. Use a propriedade align-items para centralizar o filho verticalmente, definindo seu valor como center.
  4. Adicione o elemento filho dentro do elemento pai.

Aqui está um trecho de código de exemplo:

<div class="flexbox-centering">
  <div>Conteúdo centralizado.</div>
</div>

.flexbox-centering {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
}

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 de Centralização com Flexbox. Você pode praticar mais laboratórios no LabEx para aprimorar suas habilidades.