Chapitre 500 | Base Flex – CDUI <code is my friend>

Base Flex

display: flex;
display: inline-flex;

Base Flex (`display: flex`)

HTML

<div class="flex-container">
  <div class="box">Titre</div>
  <div class="box">
    <img src="https://placehold.co/100x100" alt="Placeholder Image">
  </div>
  <div class="box">Paragraphe<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</div>

CSS

.flex-container {
  display: flex; /* Conteneur Flexbox standard */
  background-color: red; /* Fond pour bien visualiser */
  padding: 20px; /* Espace autour des enfants */
  gap: 10px; /* Espacement entre les enfants */
}

.box {
  background-color: #d4edda; /* Couleur de fond des enfants */
  border: 1px solid #c3e6cb; /* Bordure pour bien délimiter */
  padding: 10px; /* Espace intérieur dans chaque enfant */
  width: 100px; /* Taille fixe pour éviter l'étirement automatique */
}

Explication

display: flex; : Transforme .flex-container en conteneur Flexbox. Par défaut, les enfants .box s’alignent horizontalement (de gauche à droite) sur une seule ligne prenant la largeur disponible du parent. Donc le bloc flex fait toute la largeur de l’espace disponible. avec une couleur de fond on le comprend. Sans cette couleur on pourrait croire que c’est la même chose que inline-flex.

Expérimentation

En faisant passert .flex-container de display: flex à inline-flex, veuillez observer la zone rouge dans le résultat..

display: flex; : Transforme .flex-container en conteneur Flexbox. Par défaut, les enfants .box s’alignent horizontalement (de gauche à droite) sur une seule ligne, et le conteneur prend toute la largeur disponible de son parent. Avec une couleur de fond, on comprend que le conteneur occupe toute la largeur ; sans couleur, cela peut prêter à confusion.

display: inline-flex; : Transforme .flex-container en conteneur Flexbox, mais le conteneur lui-même ne prend que la place nécessaire pour ses enfants. Cela signifie qu’il s’intègre dans le flux de texte (comme un élément « en ligne », c’est-à-dire un élément qui s’aligne avec les autres sur une même ligne tant que l’espace le permet). La couleur rouge en background le démontre.

Toolbox

Expérimentations : modifiez .flex-container et passez le display à flex, inline-flex, block, inline-block et à inline… Observez le résultat.

Attention : si vous utilisez vos Toolbox sur CodePen, pensez à l’enregistrement automatique en cours. Créez d’abord votre PEN principal, puis forkez-le. Renommez immédiatement le PEN issu du fork avant de commencer à travailler dessus. Cela évitera toute confusion ou modification involontaire de votre PEN principal.

Un fork sur CodePen est une copie d’un PEN existant que vous pouvez modifier sans affecter l’original. Pour forker :

Ouvrez le PEN à copier.
Cliquez sur « Fork » (dans le menu du haut).
Renommez immédiatement votre nouveau PEN pour le différencier.

Chapitre 500 | Base Flex