Implémenter un modèle de disposition flexible atomique avec CSS

Introduction

Dans ce projet, vous allez apprendre à implémenter un modèle de disposition flexible atomique basé sur des attributs à l'aide de CSS. Le CSS atomique est une méthode de construction de CSS populaire qui simplifie l'écriture de CSS en utilisant des styles basés sur des attributs.

👀 Aperçu

🎯 Tâches

Dans ce projet, vous allez apprendre :

• Comment implémenter un modèle de disposition flexible atomique basé sur des attributs à l'aide de CSS
• Comment styliser les éléments flexibles individuels dans le modèle de disposition flexible

🏆 Réalisations

Après avoir terminé ce projet, vous serez capable de :

• Utiliser le CSS basé sur des attributs pour créer une disposition flexible
• Styliser les éléments individuels dans un modèle de disposition flexible
• Comprendre les avantages de l'utilisation du CSS atomique pour un développement CSS efficace et maintenable

Skills Graph

Configure la structure du projet

Le CSS atomique est une méthode de construction de CSS très populaire récemment, et le CSS atomique basé sur des attributs (Attributify) simplifie encore davantage l'écriture de CSS.

Par exemple, traditionnellement, nous implémentons flex en créant un identifiant de classe sur l'élément, puis en sélectionnant l'élément à l'aide du sélecteur dans le CSS :

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

Avec le CSS atomique basé sur des attributs, nous pouvons faire la même chose de la manière suivante.

<div flex></div>

Pour commencer, ouvrez l'environnement d'expérience, et la structure de répertoire est la suivante :

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

Où :

• css/style.css est le fichier de style où le code doit être complété.
• index.html est la page principale.

Cliquez sur "Go Live" dans le coin inférieur droit pour ouvrir le port 8080 et prévisualiser la page index.html dans le navigateur, l'effet sera le suivant :

Implémentez un modèle de disposition flexible atomique basé sur des attributs

Dans cette étape, vous allez apprendre à implémenter un modèle de disposition flexible atomique basé sur des attributs à l'aide de CSS.

1. Ouvrez le fichier css/style.css.
2. Localisez la section /* TODO */ dans le fichier CSS.
3. Ajoutez la règle CSS suivante pour implémenter le modèle de disposition flexible atomique basé sur des attributs :

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

Cette règle cible l'élément div avec l'attribut flex="~ col" et applique les styles nécessaires pour créer un modèle de disposition flexible vertical.

La propriété display: flex définit l'élément pour utiliser le modèle de disposition flexible, et la propriété flex-direction: column définit la direction flexible pour être verticale.

4. Enregistrez le fichier style.css.
5. Revenez à votre navigateur et rafraîchissez la page. Vous devriez voir l'effet suivant :

Sommaire

Félicitations ! Vous avez terminé ce projet. Vous pouvez pratiquer davantage de laboratoires sur LabEx pour améliorer vos compétences.