Implementar Layout Flexível Atômico com CSS

Introdução

Neste projeto, você aprenderá como implementar um layout flexível atômico baseado em atributos usando CSS. CSS atômico é um método popular de construção de CSS que simplifica a escrita de CSS usando estilos baseados em atributos.

👀 Pré-visualização

🎯 Tarefas

Neste projeto, você aprenderá:

• Como implementar um layout flexível atômico baseado em atributos usando CSS
• Como estilizar os itens flexíveis individuais dentro do layout flexível

🏆 Conquistas

Após concluir este projeto, você será capaz de:

• Usar CSS baseado em atributos para criar um layout flexível
• Estilizar os elementos individuais dentro de um layout flexível
• Compreender os benefícios de usar CSS atômico para um desenvolvimento de CSS eficiente e sustentável

Configurar a Estrutura do Projeto

CSS atômico é um método de construção de CSS muito popular recentemente, e o CSS atômico baseado em atributos (Attributify) simplifica ainda mais a escrita de CSS.

Por exemplo, tradicionalmente implementamos flex criando um identificador de classe no elemento e, em seguida, selecionando o elemento através do seletor em CSS:

<style>
  .box {
    display: flex;
  }
</style>
<div class="box"></div>

Com CSS atômico baseado em atributos, podemos fazer a mesma coisa da seguinte maneira.

<div flex></div>

Para começar, abra o ambiente de experimento, e a estrutura de diretórios é a seguinte:

├── css
│   └── style.css
└── index.html

Onde:

• css/style.css é o arquivo de estilo onde o código precisa ser complementado.
• index.html é a página principal.

Clique em "Go Live" no canto inferior direito para abrir a porta 8080 e visualizar a página index.html no navegador; o efeito será o seguinte:

Implementar Layout Flexível Atômico Baseado em Atributos

Nesta etapa, você aprenderá como implementar um layout flexível atômico baseado em atributos usando CSS.

1. Abra o arquivo css/style.css.
2. Localize a seção /* TODO */ no arquivo CSS.
3. Adicione a seguinte regra CSS para implementar o layout flexível atômico baseado em atributos:

[flex="~ col"] {
  display: flex;
  flex-direction: column;
}

Esta regra direciona o elemento div com o atributo flex="~ col" e aplica os estilos necessários para criar um layout flexível vertical.

A propriedade display: flex define o elemento para usar o layout flexível, e a propriedade flex-direction: column define a direção flexível para ser vertical.

4. Salve o arquivo style.css.
5. Volte para o seu navegador e atualize a página. Você deve ver o seguinte efeito:

Resumo

Parabéns! Você concluiu este projeto. Você pode praticar mais laboratórios no LabEx para aprimorar suas habilidades.