Comment aligner le contenu vertical horizontalement dans les colonnes Flexbox ?

Équilibrer la taille des enfants chez différents parents avec Flexbox

Question :

Dans un disposition à deux colonnes où chaque colonne contient du contenu de longueurs variables, comment pouvons-nous garantir que les listes des deux colonnes restent alignées horizontalement sans interrompre l'optimisation mobile de Bootstrap ? Idéalement, une solution devrait exploiter Flexbox et éviter JavaScript.

Réponse :

Pour y parvenir sans JavaScript, nous devons créer tous les éléments de contenu (titre, paragraphes et listes) frères et sœurs dans le balisage.

Lorsque la largeur de l'écran permet l'affichage côte à côte des colonnes, ces éléments devront être réorganisés pour maintenir un bon alignement :

• Requête multimédia :

  <code class="css">@media (min-width: 768px) {
    // Flexbox rules
  }</code>

• Configuration Flexbox :

  <code class="css">.content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
  }
  
  .content > * {
    flex-basis: calc(50% - 30px); // Adjust for gutters
  }</code>

• Ordre des éléments :

  <code class="css">.content h2 { 
    order: 0; // Heading (row 1)
  }
  
  .content p { 
    order: 1; // Paragraphs (row 2)
  }
  
  .content p + p { 
    order: 2; // Second paragraph (row 3)
  }
  
  .content ul { 
    order: 3; // List (row 4)
  }</code>

Considérations :

• Bordures : À ajoutez des bordures, utilisez une combinaison de propriétés de bordure sur les éléments et ajustez-les avec la requête multimédia pour tenir compte des différentes configurations d'empilement.

Code mis à jour :

Voir le codepen mis à jour pour un exemple fonctionnel :

[Codepen Link]

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!