Bases de la mise en page CSS

Introduction

Bienvenue dans le laboratoire sur les bases de la mise en page CSS ! Au cours de cette session pratique, vous explorerez les fondamentaux de CSS Flexbox, un puissant modèle de mise en page qui offre un moyen efficace d'organiser, d'aligner et de distribuer l'espace entre les éléments d'un conteneur.

Tout au long de ce laboratoire, vous travaillerez avec un fichier HTML préconfiguré (index.html) et un fichier CSS (style.css). Votre tâche consistera à modifier le fichier style.css pour manipuler la mise en page des éléments sur la page. Vous pourrez voir vos modifications en temps réel en passant à l'onglet Web 8080 dans l'environnement du laboratoire.

Vous apprendrez à :

• Initialiser un conteneur flex.
• Aligner les éléments le long de l'axe principal à l'aide de justify-content.
• Aligner les éléments le long de l'axe transversal à l'aide de align-items.
• Changer la direction de la mise en page avec flex-direction.
• Permettre aux éléments de passer à plusieurs lignes à l'aide de flex-wrap.

Commençons !

Définir display flex sur un élément conteneur

Dans cette étape, vous commencerez par transformer un élément de niveau bloc standard en un conteneur flex. C'est l'étape fondamentale pour créer toute mise en page flexbox.

La propriété display: flex; est appliquée à un élément parent (le conteneur) pour activer un contexte flex pour tous ses enfants directs (les éléments). Une fois appliquée, les enfants s'organisent automatiquement en ligne.

Tout d'abord, ouvrez le fichier style.css depuis l'explorateur de fichiers sur le côté gauche de votre écran.

Ensuite, localisez la règle CSS .container. Ajoutez la propriété display: flex; à l'intérieur de cette règle.

.container {
  border: 2px solid #333;
  padding: 10px;
  margin-top: 20px;
  background-color: #f0f0f0;
  /* We will add flex properties here */
  display: flex;
}

Après avoir ajouté le code, enregistrez le fichier. Passez maintenant à l'onglet Web 8080 pour voir le résultat. Vous remarquerez que les boîtes numérotées, qui étaient auparavant empilées verticalement, sont maintenant disposées horizontalement en une seule ligne.

Utiliser la propriété justify-content avec la valeur space-between

Dans cette étape, vous apprendrez à contrôler l'alignement des éléments le long de l'axe principal (horizontalement, par défaut) à l'aide de la propriété justify-content. Cette propriété aide à distribuer l'espace libre supplémentaire dans le conteneur.

Nous utiliserons la valeur space-between, qui distribue les éléments uniformément. Le premier élément est positionné au début du conteneur, le dernier élément est à la fin, et l'espace restant est distribué également entre les éléments.

Dans votre fichier style.css, ajoutez la propriété justify-content: space-between; à la règle .container.

.container {
  border: 2px solid #333;
  padding: 10px;
  margin-top: 20px;
  background-color: #f0f0f0;
  display: flex;
  justify-content: space-between;
}

Enregistrez le fichier et vérifiez l'onglet Web 8080. Vous verrez que les éléments flex sont maintenant répartis sur toute la largeur du conteneur, avec un espacement égal entre eux.

Appliquer la propriété align-items avec la valeur center

Dans cette étape, vous apprendrez à aligner les éléments le long de l'axe transversal (verticalement, par défaut) à l'aide de la propriété align-items.

Pour voir l'effet de l'alignement vertical, nous devons d'abord donner une certaine hauteur à notre conteneur. Ensuite, nous utiliserons la valeur center pour align-items afin de centrer verticalement les éléments à l'intérieur du conteneur.

Dans votre fichier style.css, ajoutez une height et la propriété align-items: center; à la règle .container.

.container {
  border: 2px solid #333;
  padding: 10px;
  margin-top: 20px;
  background-color: #f0f0f0;
  display: flex;
  justify-content: space-between;
  height: 200px;
  align-items: center;
}

Enregistrez le fichier et visualisez le résultat dans l'onglet Web 8080. Le conteneur est maintenant plus haut, et tous les éléments flex sont parfaitement centrés au milieu de l'espace vertical.

Implémenter la propriété flex-direction avec la valeur column

Dans cette étape, vous allez changer la direction de l'axe principal de l'horizontal à la verticale en utilisant la propriété flex-direction.

Par défaut, la direction flex est row. En la définissant sur column, vous pouvez empiler les éléments flex verticalement. Lorsque vous changez la direction flex en column, l'axe principal devient vertical et l'axe transversal devient horizontal. Cela signifie que justify-content contrôlera désormais l'alignement vertical, et align-items contrôlera l'alignement horizontal.

Dans votre fichier style.css, ajoutez la propriété flex-direction: column; à la règle .container.

.container {
  border: 2px solid #333;
  padding: 10px;
  margin-top: 20px;
  background-color: #f0f0f0;
  display: flex;
  justify-content: space-between;
  height: 400px; /* Augmentons la hauteur pour une meilleure visualisation */
  align-items: center;
  flex-direction: column;
}

Note : Nous avons augmenté la hauteur à 400px pour mieux visualiser l'effet de justify-content dans une disposition en colonne.

Enregistrez le fichier et observez les changements dans l'onglet Web 8080. Les éléments sont maintenant empilés en une seule colonne. Remarquez comment justify-content: space-between ajoute maintenant de l'espace verticalement entre les éléments, et align-items: center les centre horizontalement.

Ajouter la propriété flex-wrap avec la valeur wrap pour le retour à la ligne

Dans cette dernière étape, vous apprendrez à gérer les cas où les éléments flex débordent de leur conteneur. La propriété flex-wrap permet aux éléments de passer à une nouvelle ligne au lieu de rétrécir ou de déborder.

Pour démontrer cela, nous allons revenir à une disposition basée sur les lignes et définir une largeur fixe sur le conteneur qui est trop étroite pour contenir tous les éléments sur une seule ligne.

Tout d'abord, nettoyons la règle .container en supprimant les propriétés des étapes précédentes (justify-content, align-items, flex-direction, et height). Ensuite, ajoutez une width fixe et la propriété flex-wrap: wrap;.

Mettez à jour votre règle .container dans style.css pour qu'elle ressemble à ceci :

.container {
  border: 2px solid #333;
  padding: 10px;
  margin-top: 20px;
  background-color: #f0f0f0;
  display: flex;
  width: 450px; /* Définir une largeur fixe pour forcer le retour à la ligne */
  flex-wrap: wrap;
}

Enregistrez le fichier et actualisez l'onglet Web 8080. Vous verrez que les éléments flex qui ne rentrent pas sur la première ligne sont passés à une deuxième ligne. Ceci est essentiel pour créer des mises en page réactives qui s'adaptent à différentes tailles d'écran.

Résumé

Félicitations pour avoir terminé le laboratoire sur les bases de la mise en page CSS ! Vous avez acquis avec succès les concepts fondamentaux de CSS Flexbox et les avez appliqués pour créer des mises en page flexibles et réactives.

Dans ce laboratoire, vous avez pratiqué :

• display: flex; : Pour créer un conteneur flex.
• justify-content : Pour aligner les éléments le long de l'axe principal.
• align-items : Pour aligner les éléments le long de l'axe transversal.
• flex-direction : Pour définir la direction de l'axe principal (ligne ou colonne).
• flex-wrap : Pour permettre aux éléments de passer sur plusieurs lignes.

Ces propriétés sont les éléments constitutifs de la conception web moderne. Nous vous encourageons à continuer d'expérimenter avec différentes valeurs pour ces propriétés afin de renforcer davantage votre compréhension de Flexbox.