Implémentation d'une mise en page responsive image-texte avec Flexbox.

  15 avril 2025

Code CSS

.titre {font-size: 22px; color: #ccc;}
.container { 
  display: flex; 
  flex-wrap: wrap; /* Permet aux colonnes de s'empiler sur les petits écrans */ 
} 
.image-column { 
  flex: 0 0 200px; /* Largeur fixe de 200px pour la colonne de l'image */ 
  max-width: 100%; /* Assure que l'image ne dépasse pas la largeur du conteneur */ 
} 
.text-column { 
  flex: 1; /* La colonne de texte prend tout l'espace restant */ 
  padding: 0 10px; /* Espacement intérieur pour le texte */ 
} 
img { 
 max-width: 100%; /* Assure que l'image est responsive */ 
 height: auto; /* Maintient le ratio de l'image */ 
} 
 .titre {font-size: 22px; color: green;} 

/* Responsive Design: Empiler les colonnes sur les petits écrans */ 
@media (max-width: 768px) { 
 .container { 
  flex-direction: column; 
  } 
  .image-column { 
   max-width: 100%; /* Assure que l'image est responsive */ 
  height: auto; /* Maintient le ratio de l'image */ 
  margin: 0 auto;
  } 
} 

Code HTLM

<div class="container"> 
  <div class="image-column"> 
    <img src="votre image" alt="Description de l'image"> 
  </div> 

  <div class="text-column"> 
    <b class="titre">Halifax-WaterFront</b>
    <p>Voici un exemple de texte qui remplit la colonne de droite. 
    Cette colonne s'adapte à la largeur restante du conteneur.</p> 
  </div> 
</div>

La même réalisation d'une mise en page responsive d'images et de textes effectuée avec DeepSeek.

Voici le texte entré dans le “prompt”

Voici comment créer une mise en page avec Flexbox pour deux colonnes, où une colonne a une largeur fixe pour une image et l'autre colonne s'adapte pour remplir l'espace restant avec du texte. Sur les petits écrans, l'image sera centrée et aura une largeur de 80 % du conteneur.

Explication :

1. Flexbox Container : Le conteneur principal utilise display: flex pour aligner les deux colonnes côte à côte.
2. Colonne d'image : La colonne de gauche a une largeur fixe de 200px grâce à flex: 0 0 200px. Cela signifie qu'elle ne grandit ni ne rétrécit.
3. Colonne de texte : La colonne de droite utilise flex: 1, ce qui lui permet de prendre tout l'espace restant dans le conteneur.
4. Responsive Design : Avec la media query @media (max-width: 768px), les colonnes s'empilent verticalement sur les écrans de petite taille.

Voici le résultat :

Sur les grands écrans, vous aurez deux colonnes : une pour l'image (200px de large) et une pour le texte (qui remplit le reste).

Sur les petits écrans (moins de 768px), les colonnes s'empileront verticalement pour une meilleure lisibilité.