Comment utiliser CSS Flexbox pour obtenir une disposition réactive avec un rapport de hauteur de 2: 5: 3?

Créez une disposition réactive avec un rapport de hauteur de 2: 5: 3 en utilisant CSS Flexbox

Cet article décrit comment utiliser CSS Flexbox pour obtenir une disposition réactive avec toujours un rapport de hauteur 2: 5: 3 et s'adapter à différentes tailles d'écran. La clé est d'utiliser ingénieusement les fonctionnalités de Flexbox.

Tout d'abord, nous définissons le conteneur parent sur la disposition Flex et spécifions la disposition verticale: display: flex; flex-direction: column; . Cela entraîne la disposition des éléments enfants en séquence le long de l'axe vertical.

Ensuite, utilisez l'attribut flex pour contrôler la proportion de hauteur des éléments enfants. flex: 2; , flex: 5; , flex: 3; Spécifie que le rapport de trois éléments enfants occupant la hauteur du conteneur parent est de 2: 5: 3. La hauteur du conteneur parent sera adaptée au contenu, tandis que la hauteur de l'élément enfant sera allouée proportionnellement. Cette approche garantit que le rapport de hauteur reste cohérent à travers les tailles d'écran.

Pour faire en sorte que la disposition remplisse la hauteur de la fenêtre entière, nous définissons la hauteur du conteneur parent à 100% de la hauteur de la fenêtre: height: 100vh; .

Voici les exemples de code CSS et HTML:

Code CSS:

 .Container {
  Affichage: flex;
  Flex-Direction: colonne;
  Hauteur: 100VH;
  Align-Items: Centre; / * Facultatif: centrage vertical * /
}

.item1 {
  Flex: 2;
}

.item2 {
  Flex: 5;
}

.item3 {
  Flex: 3;
}

Code html:

 


  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Disposition de Flexbox</title>
  <style>
    /* CSS 代码同上 */
  </style>


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

Grâce au code ci-dessus, vous pouvez créer une disposition réactive avec un rapport de hauteur de 2: 5: 3 et maintenir les proportions correctes pour différentes tailles d'écran. align-items: center; est un attribut facultatif utilisé pour les éléments enfants verticalement neutres, qui peuvent être ajoutés ou supprimés 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!