Tutoriel HTML : Comment utiliser Flexbox pour une mise en page évolutive de même hauteur et de même largeur

Tutoriel HTML : Comment utiliser Flexbox pour une mise en page évolutive de même hauteur et de même largeur

Introduction : Flexbox est un mode de mise en page puissant qui peut facilement répondre à diverses exigences de mise en page complexes. Cet article explique comment utiliser Flexbox pour implémenter une disposition évolutive de même hauteur et de même largeur, et fournit des exemples de code spécifiques.

1. Qu'est-ce que Flexbox ?

Flexbox est un mode de mise en page basé sur le modèle de boîte flexible. Il permet d'obtenir divers effets de mise en page flexibles en allouant automatiquement l'espace des sous-éléments dans le conteneur. Il possède les fonctionnalités suivantes :

1. permet aux éléments enfants de se développer et de se contracter automatiquement selon les besoins.
2. Vous pouvez contrôler la disposition des éléments enfants dans la direction de l'axe principal.
3. Peut gérer l'alignement des éléments enfants dans le conteneur.
4. Vous pouvez modifier l'ordre des éléments enfants.

2. Préparation

Avant de commencer à utiliser Flexbox, assurez-vous de comprendre les bases du HTML et du CSS et d'introduire les propriétés de mise en page Flexbox dans le code.

/ Introduisez l'attribut de mise en page Flexbox dans CSS /
.container {
display: flex;
}

3. Implémentez une mise en page évolutive à hauteur égale

Tout d'abord, implémentons une mise en page simple et évolutive à hauteur égale. Dans cette disposition, la hauteur du conteneur s'ajustera automatiquement en fonction de la quantité de contenu et les éléments enfants diviseront également la hauteur du conteneur.

Le code HTML est le suivant :

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

Le code CSS est le suivant :

.container {
  display: flex;
}

.item {
  flex: 1;
  border: 1px solid #000;
}

Analyse :

1. Définissez l'attribut d'affichage du conteneur sur flex, afin qu'il adopte le mode de mise en page Flexbox.
2. L'attribut flex des éléments enfants est défini sur 1, ce qui signifie qu'ils diviseront également l'espace du conteneur.
3. En définissant le style de bordure, nous pouvons voir plus clairement la hauteur des éléments enfants.

4. Implémenter une disposition évolutive de largeur égale

Ensuite, nous implémenterons une disposition évolutive de largeur égale. Dans cette disposition, la largeur des éléments enfants s'ajuste automatiquement à la largeur du conteneur et leurs largeurs sont également divisées de manière égale.

Le code HTML est le suivant :

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

Le code CSS est le suivant :

.container {
  display: flex;
}

.item {
  flex: 1;
  border: 1px solid #000;
}

Parsing :

1. De même, nous devons définir l'attribut d'affichage du conteneur sur flex.
2. La propriété flex des éléments enfants est définie sur 1, ce qui signifie qu'ils diviseront également la largeur du conteneur.
3. En définissant le style de bordure, nous pouvons voir plus clairement la largeur des éléments enfants.

5. Implémenter une disposition évolutive simultanément de hauteurs et de largeurs égales

Enfin, nous combinerons les caractéristiques des deux dispositions précédentes pour implémenter une disposition évolutive simultanément de hauteurs et de largeurs égales.

Le code HTML est le suivant :

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

Le code CSS est le suivant :

.container {
  display: flex;
}

.item {
  flex: 1;
  border: 1px solid #000;
}

Parsing :

1. De même, nous devons définir l'attribut d'affichage du conteneur sur flex.
2. La propriété flex des éléments enfants est définie sur 1, ce qui signifie qu'ils diviseront également la largeur du conteneur.
3. En définissant le style de bordure, nous pouvons voir plus clairement la largeur des éléments enfants.

Conclusion :

Avec Flexbox, nous pouvons facilement réaliser divers besoins de mise en page, y compris des mises en page évolutives de même hauteur et de même largeur. J'espère que les exemples de code fournis dans cet article pourront vous aider à mieux maîtriser la disposition Flexbox. Si vous avez d'autres questions sur Flexbox, vous pouvez continuer à apprendre plus d'informations et à vous entraîner.

Matériel de référence :

1. Guide CSS Flexbox : https://css-tricks.com/snippets/css/a-guide-to-flexbox/
2. Combat réel Flexbox : https://zhuanlan.zhihu.com/ p/25303493

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!