Comment maintenir l'alignement dans les lignes réactives sans JavaScript

Maintenir la hauteur des frères et sœurs dans les lignes réactives

Face à des colonnes contenant des longueurs de contenu variables et au désir de maintenir l'alignement en leur sein, à l'aide de JavaScript n'est pas nécessaire. En modifiant CSS, nous pouvons créer des mises en page flexibles qui répondent aux fonctionnalités souhaitées sans rompre les optimisations mobiles.

La clé est de faire en sorte que les éléments de chaque colonne soient directement frères et sœurs, afin qu'ils puissent se « voir ». Ensuite, nous utilisons des requêtes multimédias pour réorganiser leur ordre en fonction de la largeur de l'écran. Cela garantit que sur les écrans plus larges, les éléments sont côte à côte, tandis que sur les écrans plus étroits, ils s'empilent verticalement.

Code mis à jour :

Pour y parvenir, nous introduisons une classe de contenu qui enveloppe tous les éléments de chaque colonne :

<code class="css">.content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}</code>

Les éléments individuels du contenu reçoivent une largeur personnalisée :

<code class="css">.content > * {
  flex-basis: calc(50% - 30px);
}</code>

Requête multimédia :

Pour les écrans plus larges, nous utilisons une requête multimédia pour réorganiser les éléments et ajuster leurs largeurs :

<code class="css">@media (min-width: 768px) {
  .content h2 {
    /*  1st row  */
    order: 0;
  }

  .content p {
    /*  2nd row  */
    order: 1;
  }

  .content p + p {
    /*  3rd row  */
    order: 2;
    flex-basis: calc(100% - 30px);
  }

  .content ul {
    /*  4th row  */
    order: 3;
  }
}</code>

Notes supplémentaires :

• Vous devrez peut-être ajuster les valeurs du point d'arrêt et de la base flexible de la requête multimédia pour différentes tailles d'écran.
• Pour tenir compte des éléments de hauteur différente, vous pouvez appliquer des propriétés de bordure à des éléments individuels avec des requêtes multimédias supplémentaires.

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!