Comprendre la propriété flex-basis dans CSS Flexbox

Introduction

Dans ce laboratoire, les participants exploreront la propriété flex-basis dans CSS Flexbox grâce à une approche pratique et complète. En créant un fichier HTML structuré et en ajoutant progressivement des styles CSS, les apprenants acquerront une expérience pratique pour comprendre comment flex-basis influence la dimension initiale des éléments flexibles dans un conteneur.

Le laboratoire guide les étudiants dans la création d'une disposition flexbox, la définition des propriétés du conteneur, l'application de flex-basis à des éléments individuels et l'expérimentation avec différentes valeurs. Les participants apprendront comment flex-basis interagit avec les autres propriétés flex, leur permettant de contrôler le dimensionnement et la distribution fondamentales d'éléments dans des designs web réactifs.

Créer un fichier HTML pour la mise en page Flexbox

Dans cette étape, vous créerez le fichier HTML de base pour explorer la propriété flex-basis dans CSS Flexbox. Nous allons établir une structure HTML simple qui servira de base pour nos expériences de disposition Flexbox.

Ouvrez l'IDE Web et accédez au répertoire ~/projet. Créez un nouveau fichier appelé flexbox-demo.html à l'aide de l'interface de l'IDE Web.

Voici la structure HTML de base que vous utiliserez :

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Flexbox flex-basis Demo</title>
    <style>
      /* Les styles CSS seront ajoutés dans les étapes suivantes */
    </style>
  </head>
  <body>
    <div class="container">
      <div class="flex-item item1">Item 1</div>
      <div class="flex-item item2">Item 2</div>
      <div class="flex-item item3">Item 3</div>
      <div class="flex-item item4">Item 4</div>
      <div class="flex-item item5">Item 5</div>
    </div>
  </body>
</html>

Analysons la structure HTML :

Nous avons créé un conteneur <div> avec la classe container
À l'intérieur du conteneur, nous avons cinq éléments <div> avec les classes flex-item et des classes d'éléments individuels
Cette structure nous permettra de démontrer les propriétés flex-basis dans les étapes suivantes

Sortie exemple lorsque vous enregistrez le fichier dans l'IDE Web :

Fichier créé : ~/projet/flexbox-demo.html

Définir un conteneur Flexbox CSS de base

Dans cette étape, vous allez apprendre à créer un conteneur Flexbox CSS de base en ajoutant des styles au fichier HTML créé dans l'étape précédente. Ouvrez le fichier flexbox-demo.html dans l'IDE Web et modifiez la section <style> pour définir le conteneur Flexbox.

Ajoutez le CSS suivant pour définir le conteneur Flexbox de base :

<style>
  .container {
    display: flex;
    background-color: #f0f0f0;
    border: 2px solid #333;
    padding: 20px;
  }

  .flex-item {
    background-color: #4caf50;
    color: white;
    margin: 10px;
    padding: 20px;
    text-align: center;
  }
</style>

Analysons les principales propriétés CSS :

display: flex; transforme le conteneur en un conteneur Flex
background-color et border aident à visualiser le conteneur
Les styles .flex-item définissent l'apparence des éléments flexibles individuels
margin et padding fournissent un espacement entre les éléments

Sortie exemple lorsque vous enregistrez le fichier :

Styles de conteneur Flexbox ajoutés à flexbox-demo.html

Lorsque vous ouvrez ce fichier HTML dans un navigateur, vous verrez cinq boîtes vertes disposées horizontalement, démontrant la disposition Flex par défaut.

Appliquer la propriété flex-basis aux éléments flexibles

Dans cette étape, vous allez découvrir la propriété flex-basis et la manière dont elle contrôle la taille initiale des éléments flexibles. Ouvrez le fichier flexbox-demo.html dans l'IDE Web et mettez à jour les styles CSS pour démontrer flex-basis.

Ajoutez le CSS suivant pour appliquer flex-basis à des éléments flexibles individuels :

<style>
  .container {
    display: flex;
    background-color: #f0f0f0;
    border: 2px solid #333;
    padding: 20px;
  }

  .flex-item {
    background-color: #4caf50;
    color: white;
    margin: 10px;
    padding: 20px;
    text-align: center;
  }

  .item1 {
    flex-basis: 100px;
  }
  .item2 {
    flex-basis: 200px;
  }
  .item3 {
    flex-basis: 150px;
  }
  .item4 {
    flex-basis: 250px;
  }
  .item5 {
    flex-basis: 120px;
  }
</style>

Points clés sur flex-basis :

Elle définit la taille principale initiale d'un élément flexible
Peut être spécifiée en pixels, en pourcentages ou dans d'autres unités
Détermine la taille par défaut avant la croissance ou la réduction des éléments flexibles
Remplace width dans un conteneur flexible

Sortie exemple lorsque vous enregistrez le fichier :

Éléments flexibles avec différentes valeurs de flex-basis ajoutés

Lorsque vous ouvrez le fichier HTML dans un navigateur, vous verrez des éléments flexibles avec des largeurs initiales variables en fonction de leurs valeurs de flex-basis.

Expérimenter avec différentes valeurs de flex-basis

Dans cette étape, vous allez explorer diverses façons de spécifier les valeurs de flex-basis et comprendre comment différentes unités et approches affectent le dimensionnement des éléments flexibles. Mettez à jour le CSS dans votre fichier flexbox-demo.html avec les styles suivants :

<style>
  .container {
    display: flex;
    background-color: #f0f0f0;
    border: 2px solid #333;
    padding: 20px;
  }

  .flex-item {
    background-color: #4caf50;
    color: white;
    margin: 10px;
    padding: 20px;
    text-align: center;
  }

  /* Différents types de valeurs de flex-basis */
  .item1 {
    flex-basis: 100px;
  } /* Largeur fixe en pixels */
  .item2 {
    flex-basis: 20%;
  } /* Pourcentage du conteneur */
  .item3 {
    flex-basis: auto;
  } /* Basé sur le contenu */
  .item4 {
    flex-basis: 10rem;
  } /* Utilisation d'unités rem */
  .item5 {
    flex-basis: content;
  } /* Basé sur la taille du contenu */
</style>

Observations clés sur les valeurs de flex-basis :

Les valeurs en pixels (100px) fournissent une largeur fixe
Les valeurs en pourcentage (20%) sont proportionnelles au conteneur
auto utilise la taille du contenu de l'élément
Différentes unités telles que rem offrent un dimensionnement réactif
Le mot-clé content s'adapte à la taille du contenu de l'élément

Sortie exemple lorsque vous enregistrez le fichier :

Éléments flexibles avec diverses configurations de flex-basis

Lorsque vous ouvrez le fichier HTML dans un navigateur, vous verrez comment différentes valeurs de flex-basis influencent le dimensionnement et la disposition des éléments.

Explorer l'interaction de flex-basis avec les autres propriétés Flex

Dans cette étape, vous allez apprendre comment flex-basis interagit avec d'autres propriétés Flex telles que flex-grow et flex-shrink. Mettez à jour le CSS dans votre fichier flexbox-demo.html avec l'exemple complet suivant :

<style>
  .container {
    display: flex;
    background-color: #f0f0f0;
    border: 2px solid #333;
    padding: 20px;
    width: 100%;
  }

  .flex-item {
    background-color: #4caf50;
    color: white;
    margin: 10px;
    padding: 20px;
    text-align: center;
  }

  /* Illustrer les interactions des propriétés Flex */
  .item1 {
    flex-basis: 100px;
    flex-grow: 1;
    flex-shrink: 0;
  }
  .item2 {
    flex-basis: 200px;
    flex-grow: 2;
    flex-shrink: 1;
  }
  .item3 {
    flex-basis: 150px;
    flex-grow: 1;
    flex-shrink: 2;
  }
  .item4 {
    flex: 1 1 250px; /* raccourci pour grow, shrink, basis */
  }
  .item5 {
    flex: 2 0 120px;
  }
</style>

Concepts clés des interactions des propriétés Flex :

flex-grow : Détermine la quantité par laquelle un élément va croître par rapport aux autres éléments
flex-shrink : Contrôle la quantité par laquelle un élément va rétrécir par rapport aux autres éléments
Le raccourci flex combine grow, shrink et basis
Différentes combinaisons créent des comportements de disposition uniques

Sortie exemple lorsque vous enregistrez le fichier :

Éléments flexibles avec des interactions complexes de croissance, de réduction et de base

Lorsque vous ouvrez le fichier HTML dans un navigateur, vous observerez comment ces propriétés fonctionnent ensemble pour créer des dispositions flexibles.

Résumé

Dans ce laboratoire, les participants explorent la propriété flex-basis dans CSS Flexbox en créant une démonstration complète d'HTML et de CSS. Le laboratoire commence par la construction d'un fichier HTML de base présentant un conteneur avec plusieurs éléments flexibles, établissant le cadre structurel pour les expériences de mise en page Flexbox. Les participants apprennent à définir un conteneur Flexbox de base à l'aide de CSS, en configurant les propriétés d'affichage, les couleurs d'arrière-plan et le style initial pour créer une mise en page réactive et visuellement attrayante.

Le laboratoire guide les apprenants dans l'application de la propriété flex-basis aux éléments flexibles, leur permettant de comprendre comment cette propriété contrôle la taille initiale des éléments flexibles avant que l'espace supplémentaire ne soit réparti. En expérimentant avec différentes valeurs de flex-basis et en explorant son interaction avec d'autres propriétés Flex, les participants obtiennent des connaissances pratiques sur la gestion des mises en page flexibles et le contrôle du dimensionnement des éléments dans un conteneur Flexbox.