Comment réaliser une disposition de hauteur adaptative avec une échelle 2: 5: 3 à l'aide de CSS Flexbox?

Construisez facilement les dispositions adaptatives et hautement avec une échelle 2: 5: 3 avec CSS Flexbox

Cet article décrit comment utiliser le modèle CSS Elastic Box (Flexbox) pour créer un conteneur avec la proportion de hauteur précise des trois éléments enfants à l'intérieur de son 2: 5: 3, et peut être automatiquement ajusté en fonction de la taille de l'écran, en maintenant toujours la proportion et en remplissant la hauteur du conteneur parent.

Nous avons besoin d'un conteneur contenant trois éléments enfants, et le rapport de hauteur de ces trois éléments enfants doit être maintenu à 2: 5: 3, et peut être parfaitement adapté à diverses résolutions d'écran. Les dispositions de Flexbox peuvent facilement y parvenir.

La clé consiste à définir display: flex et flex-direction: column du conteneur parent, ce qui rend les éléments enfants disposés verticalement. Ensuite, utilisez l'attribut flex pour définir la proportion d'espace occupée par chaque élément enfant: flex: 2 , flex: 5 et flex: 3 représentant respectivement l'élément enfant occupant 2 parties, 5 parties et 3 parties de la hauteur du conteneur parent. La hauteur du conteneur parent est automatiquement ajustée en fonction du contenu pour s'assurer que les éléments enfants sont proportionnels correctement et adaptatifs. Pour le centrage vertical, nous avons utilisé align-items: center .

L'extrait de code suivant démontre l'implémentation:

 .Container {
  Affichage: flex;
  Flex-Direction: colonne;
  Align-Items: Centre; / * Centre vertical * /
  Hauteur: 100VH; / * Il occupe la hauteur complète de la fenêtre, peut être modifié en fonction des conditions réelles * /
}

.item1 {
  Flex: 2;
}

.item2 {
  Flex: 5;
}

.item3 {
  Flex: 3;
}

Pour montrer l'effet plus intuitivement, nous fournissons un exemple HTML complet:

 


  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Disposition de Flexbox</title>
  <style>
    .container {
      height: 100vh;
      width: 100px;
      background: #000;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .item1 {
      flex: 2;
      background: pink;
    }

    .item2 {
      flex: 5;
      background-color: blue;
    }

    .item3 {
      flex: 3;
      background-color: cadetblue;
    }
  </style>


  <div class="container">
    <div class="item1"></div>
    <div class="item2"></div>
    <div class="item3"></div>
  </div>

Ce code crée une disposition hautement adaptative avec un rapport de 2: 5: 3. La hauteur du conteneur parent est définie à 100vh de sorte qu'il occupe la hauteur de la fenêtre, que vous pouvez ajuster en fonction des besoins réels.

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!