Comment implémenter une disposition de hauteur personnalisée avec une échelle 2: 5: 3 et s'adapter à différentes résolutions à l'aide de CSS Flexbox?

CSS Flexbox implémente l'adaptation très proportionnelle

Cet article décrit comment utiliser CSS Flexbox pour créer une disposition avec un rapport de hauteur de 2: 5: 3 et le garder cohérent à différentes résolutions. Cette disposition est très pratique dans la conception Web et permet une allocation flexible de la hauteur du bloc de contenu de la page.

La technologie principale est le modèle de boîte élastique Flexbox de CSS. En définissant display: flex du conteneur parent et flex de l'élément enfant, vous pouvez facilement contrôler la proportion de hauteur de l'élément enfant.

Tout d'abord, définissez le style de conteneur parent afin qu'il devienne un conteneur flexible:

 .Container {
  Affichage: flex;
  Flex-Direction: colonne; / * Arrangement vertical des éléments enfants * /
  Hauteur: 100VH; / * Occuper la hauteur de la fenêtre * /
  Align-Items: Stretch; / * Les éléments enfants soutiennent la largeur du conteneur parent * /
}

flex-direction: column; S'assurer que les éléments enfants sont organisés verticalement; height: 100vh; align-items: stretch; Assurez-vous que les éléments enfants sont pleins du conteneur parent.

Ensuite, définissez l'attribut flex de l'élément enfant pour définir l'échelle de hauteur:

 .box1 {flex: 2; }
.box2 {flex: 5; }
.box3 {flex: 3; }

flex: 2; , flex: 5; , flex: 3; Définit respectivement le rapport de hauteur des trois éléments enfants à 2: 5: 3. Flexbox alloue automatiquement l'espace disponible en fonction de cette échelle.

Voici un exemple HTML complet:

 


  <title>Ratio de hauteur de Flexbox</title>
  <style>
    .container {
      display: flex;
      flex-direction: column;
      height: 100vh;
      align-items: stretch;
    }
    .box1 { flex: 2; background-color: lightpink; }
    .box2 { flex: 5; background-color: lightblue; }
    .box3 { flex: 3; background-color: lightgreen; }
  </style>


  <div class="container">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
  </div>

Grâce à cette méthode, le rapport de hauteur des trois sous-éléments est toujours maintenu à 2: 5: 3, quelle que soit la taille de la fenêtre du navigateur change, réalisant une disposition adaptative parfaite.

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!