Introduction
Dans la ville animée de Petville, Jordan, un développeur web, est chargé de redessiner le site web "Pet's House".
Ce laboratoire crée une mise en page responsive et visuellement attrayante pour les propriétaires d'animaux de compagnie. Le site web doit présenter efficacement les services, l'entreprise et les informations de contact sur tous les appareils. Jordan décide d'utiliser Flexbox pour ses puissantes capacités de mise en page.
Les bases de Flexbox et la propriété display
Pour commencer avec Flexbox, vous devez comprendre ses concepts de base.
Imaginez que vous êtes un designer d'intérieur et que votre page web est une grande pièce vide. Votre tâche est de rendre cette pièce à la fois confortable et esthétiquement agréable. Entrez Flexbox, votre baguette magique, qui vous aide à placer facilement les meubles (c'est-à-dire les éléments de la page web). Que ce soit un canapé (contenu principal) ou une table basse (informations supplémentaires), avec Flexbox, vous pouvez vous assurer qu'ils sont tous parfaitement positionnés.
Avant de nous lancer dans Flexbox, passons rapidement en revue quelques concepts fondamentaux :
- Conteneur Flex : Pensez à cela comme à votre pièce, où vous allez placer divers meubles.
- Éléments Flex : Ce sont vos meubles, comme les canapés, les chaises et les tables basses.
Pour commencer à utiliser Flexbox, vous devez d'abord déclarer un conteneur Flex. C'est comme dire : "Très bien, commençons à décorer cette pièce."
.container {
display: flex;
}
Une fois que vous avez fait cela, tous les enfants directs de la classe .container deviennent des éléments Flex, en suivant les règles de mise en page de Flexbox.
La propriété CSS display définit si un élément est traité comme une boîte de type bloc ou en ligne et la mise en page utilisée pour ses enfants, telle que la mise en page en flux, la grille ou Flex.
Nous pouvons utiliser l'attribut display pour changer la façon dont les éléments en ligne sont disposés, par exemple :
display: block donne aux éléments leur propre espace, tandis que display: inline-block permet une mise en page plus flexible, permettant aux éléments de se situer les uns à côté des autres tout en contrôlant leurs dimensions.
Maintenant que nous savons comment utiliser display, nous pouvons ajouter ceci à style.css :
.navigation li {
display: inline-block;
}
.navigation li a {
text-decoration: none;
color: black;
padding: 10px;
display: block;
}
form.form-content {
display: block;
padding: 0.8em 0;
}
Axes principaux et axes transversaux
Dans le domaine de Flexbox, deux concepts sont essentiels : l'axe principal et l'axe transversal. Par défaut, l'axe principal est horizontal et l'axe transversal est vertical, mais cela peut être ajusté avec la propriété flex-direction.
- Axe principal horizontal :
flex-direction: row;(valeur par défaut) - Axe principal vertical :
flex-direction: column;
Par exemple :
Éléments Flex
Maintenant, parlons de la manière de positionner nos meubles (éléments Flex).
justify-content: Cette propriété contrôle la distribution des éléments Flex le long de l'axe principal. Imaginez ajuster la distance entre un canapé et des chaises pour vous assurer qu'ils ne sont ni trop éloignés l'un de l'autre ni trop proches.align-items: Cette propriété détermine comment les éléments Flex s'alignent le long de l'axe transversal. C'est comme vous assurer que tous vos tableaux sont accrochés au même niveau, rendant la pièce plus propre.flex-grow: Imaginez que vous voulez que votre étagère occupe tout ou une partie de l'espace restant. Avec cette propriété, vous pouvez "faire croître" un meuble (élément) pour combler l'espace supplémentaire.
Voyons le charme de Flexbox en action avec une mise en page simple, composée d'un conteneur et de trois éléments. Ce que nous voulons faire est de centrer horizontalement ces trois éléments dans le conteneur et de nous assurer qu'ils sont régulièrement répartis lorsqu'il y a suffisamment d'espace.
Avec cette configuration, nos meubles (éléments) seront positionnés comme nous le souhaitons.
Flexbox est vraiment comme de la magie, nous permettant d'arranger nos pages web avec une flexibilité et une facilité inégalées. Maintenant que vous avez maîtrisé ce charme, n'hésitez pas à l'essayer! Créez la "pièce" de vos rêves!
Pour démontrer de manière claire le charme de Flexbox, je vais générer une illustration montrant une pièce avec une mise en page Flexbox, y compris des meubles (comme un canapé, une table basse et une étagère) représentant différents éléments Flex. Cela montrera comment ils sont élégamment positionnés dans la pièce en utilisant des propriétés Flexbox telles que justify-content et align-items.
Pour résumer, Flexbox est un modèle de mise en page unidimensionnel qui vous permet d'aligner facilement des éléments horizontalement ou verticalement, et il est parfait pour créer des designs réactifs. Voici quelques termes clés à connaître :
- Conteneur Flex : L'élément parent qui contient les éléments Flex.
- Élément Flex : Un élément individuel à l'intérieur du conteneur Flex.
- Direction Flex : Détermine l'axe principal du conteneur.
- Retour à la ligne Flex : Contrôle si les éléments doivent être répartis sur plusieurs lignes ou non.
- Justification du contenu : Aligne les éléments le long de l'axe principal.
- Alignement des éléments : Aligne les éléments le long de l'axe transversal.
Maintenant que nous savons comment utiliser Flexbox, nous pouvons ajouter ceci à style.css :
body {
display: flex;
flex-direction: column;
letter-spacing: 2px;
font-weight: 400;
font-size: 1.2vw;
}
header {
display: flex;
flex-direction: row;
background-color: rgb(233, 174, 87);
width: 100%;
max-height: max-content;
min-height: 1em;
padding-top: 1%;
padding-bottom: 1%;
text-transform: uppercase;
}
ul {
list-style: none;
display: flex;
flex-direction: row;
}
.navigation-section {
width: 70%;
}
section {
display: flex;
flex-direction: row;
width: 100%;
padding: 10% 0;
}
.story-sect {
display: flex;
flex-direction: row-reverse;
background-color: rgb(233, 174, 87);
color: #fff;
}
.samples {
flex-direction: column;
text-align: center;
}
footer {
display: flex;
flex-direction: row-reverse;
height: 5em;
width: 100%;
color: #fff;
background-color: rgb(239, 206, 157);
text-transform: uppercase;
}
Résumé
Dans ce laboratoire, Jordan a appliqué avec succès Flexbox au site web "Pet's House", améliorant la réactivité et l'esthétique de sa mise en page. Grâce à des étapes axées sur l'en-tête, la navigation et les sections principales, le site web affiche désormais son contenu de manière efficace sur différents appareils. Flexbox s'est avéré être un outil précieux pour créer des mises en page dynamiques et flexibles, mettant en évidence son importance dans la conception web moderne.
