Tutoriel HTML : Comment utiliser Flexbox pour une mise en page adaptative évolutive, de hauteur égale, de largeur égale et d'espacement égal

Tutoriel HTML : Comment utiliser Flexbox pour une mise en page adaptative évolutive à hauteur égale, largeur égale et espacement égal, des exemples de code spécifiques sont nécessaires

1 Qu'est-ce que la mise en page Flexbox ? Flexbox est un nouveau mode de mise en page introduit dans CSS3. , ce qui peut atteindre la flexibilité La disposition du modèle de boîte. C'est l'abréviation de Flexible Box, qui signifie mise en page flexible. La disposition Flexbox peut ajuster automatiquement la position et la taille des éléments en fonction de la taille du conteneur pour obtenir diverses dispositions flexibles.

2. Comment utiliser la mise en page Flexbox

Créer un conteneur de mise en page
1. Tout d'abord, vous devez créer un conteneur contenant les éléments à mettre en page. En HTML, vous pouvez utiliser un élément div comme conteneur. Afin de définir le conteneur sur la disposition Flexbox, vous devez ajouter le code suivant à l'attribut style du conteneur :
   

<div style="display: flex;"></div>

Définissez le sens de disposition des éléments
2. Dans le conteneur, vous devez spécifier le sens de disposition de les éléments, qui peuvent être disposés horizontalement ou verticalement. Par défaut, les éléments sont disposés horizontalement. Si vous devez organiser verticalement, vous pouvez ajouter le code suivant dans l'attribut style du conteneur :
   

<div style="display: flex; flex-direction: column;"></div>

Définissez le rapport de mise à l'échelle de l'élément
3. Les éléments de la disposition Flexbox peuvent allouer l'espace restant en fonction du rapport de mise à l'échelle défini. . Par défaut, le rapport de mise à l'échelle de l'élément est de 0, ce qui signifie aucune mise à l'échelle. Vous pouvez ajouter le code suivant à l'attribut style de l'élément pour définir le rapport de mise à l'échelle de l'élément :
   

<div style="display: flex;">
  <div style="flex: 1;"></div>
  <div style="flex: 2;"></div>
</div>

Dans cet exemple, le rapport de mise à l'échelle du premier élément div est de 1 et le rapport de mise à l'échelle du deuxième élément div est 2. Autrement dit, le premier élément occupe 1/3 de l'espace et le deuxième élément occupe 2/3 de l'espace.

Définissez des hauteurs et des largeurs égales
4. La disposition Flexbox peut facilement obtenir une disposition de hauteurs et de largeurs égales. Ajoutez le code suivant à l'attribut style de l'élément pour obtenir l'effet d'une hauteur et d'une largeur égales :
   

<div style="display: flex;">
  <div style="flex: 1;"></div>
  <div style="flex: 1;"></div>
  <div style="flex: 1;"></div>
</div>

Dans cet exemple, le rapport de mise à l'échelle des trois éléments div est de 1, et ils diviseront également l'espace de l'élément. conteneur, obtenant le même effet. L'effet de hauteur et de largeur égales.

Définir l'espacement
5. Dans la mise en page Flexbox, vous pouvez définir l'espacement des éléments via les propriétés justifier-contenu et align-items. La propriété justifier-content est utilisée pour définir l'espacement dans la direction horizontale et la propriété align-items est utilisée pour définir l'espacement dans la direction verticale. Les valeurs pouvant être définies pour ces deux propriétés sont : flex-start, flex-end, center, space-between et space-around.
   

<div style="display: flex; justify-content: space-between; align-items: center;">
  <div></div>
  <div></div>
</div>

Dans cet exemple, l'espacement entre les deux éléments div est uniformément réparti et la taille spécifique de l'espacement est déterminée par l'espace du conteneur.

3. Compatibilité du navigateur avec la mise en page Flexbox

La mise en page Flexbox a une bonne compatibilité dans les navigateurs modernes, mais il peut y avoir des problèmes de compatibilité dans certains navigateurs plus anciens. Ces problèmes peuvent être résolus en ajoutant certains préfixes de navigateur tels que -webkit-, -moz-, -ms-, etc.

4. Exemple de code

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      height: 500px;
      background-color: #f2f2f2;
      padding: 20px;
      box-sizing: border-box;
    }
    
    .item {
      flex: 1;
      width: 100%;
      background-color: #fff;
      border: 1px solid #ccc;
      margin-bottom: 10px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
  </div>
</body>
</html>

Le code ci-dessus implémente un exemple de disposition Flexbox. Il y a trois éléments enfants de hauteur égale et d'espacement égal dans le conteneur. La hauteur du conteneur est une valeur fixe et est affichée verticalement au centre du conteneur.

Résumé :

En utilisant la disposition Flexbox, vous pouvez facilement mettre en œuvre une disposition adaptative évolutive, de hauteur égale, de largeur égale et d'espacement égal. En définissant les valeurs d'attribut des conteneurs et des éléments, il est facile d'obtenir divers arrangements flexibles. Dans le même temps, il convient de noter que la mise en page Flexbox peut présenter des problèmes de compatibilité dans certains navigateurs plus anciens, qui peuvent être résolus en ajoutant un préfixe de navigateur. J'espère que cet article pourra vous aider à utiliser la mise en page Flexbox dans le développement HTML.

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!