Maîtrisez les compétences de mise en page flexibles de CSS3 et créez facilement une interface Web moderne.

Maîtrisez les compétences de mise en page flexible de CSS3 et créez facilement une interface Web moderne.

À l’ère actuelle de développement rapide d’Internet, la conception de sites Web est devenue un domaine important. Afin de répondre aux besoins des utilisateurs en matière d'interfaces Web, les développeurs continuent d'explorer et d'utiliser de nouvelles technologies pour créer des pages Web plus modernes et plus attrayantes. Parmi eux, la mise en page flexible de CSS3 est une technique qui peut aider les développeurs à présenter les éléments de pages Web de manière plus flexible.

La disposition dite flexible, c'est-à-dire la disposition en boîte flexible, est une méthode de disposition réactive qui peut ajuster automatiquement la position et la taille des éléments en fonction de la taille et des règles de disposition du conteneur. Par rapport à la disposition traditionnelle du modèle de boîte, la disposition flexible est plus pratique et flexible, et peut s'adapter à différentes tailles d'écran et types d'appareils.

　Avant de commencer à utiliser la mise en page flexible, nous devons d'abord comprendre quelques concepts de base. La mise en page Flex implique les trois attributs suivants :

　　1. Conteneur Flex (conteneur flexible) : les éléments utilisant la mise en page flexible sont appelés conteneurs. En définissant l'attribut d'affichage sur flex ou inline-flex, l'élément peut être défini comme un conteneur de boîte flexible.

　2. Élément flexible : chaque sous-élément du conteneur est appelé un élément, et leur disposition, leur taille et d'autres attributs de style peuvent être définis.

　　3. Axe flexible : L'attribut flex-direction peut être utilisé pour spécifier la direction de disposition des éléments dans le conteneur. L'axe flexible est l'axe formé par la direction de disposition.

　 Avant d'élaborer sur les techniques de mise en page flexible, jetons un coup d'œil à un exemple simple pour comprendre l'utilisation de base de la mise en page flexible :

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

<style>
.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.item {
  flex: 1;
  height: 100px;
  background-color: #ff9900;
}
</style>

　 Dans le code ci-dessus, nous créons un conteneur et configurons le conteneur pour qu'il fléchisse la mise en page via l'affichage. attribut . Ensuite, l'alignement entre les éléments est défini sur space-between via l'attribut justification-content, de sorte que les intervalles entre les éléments soient égaux. Utilisez ensuite l'attribut align-items pour définir l'alignement des éléments sur l'axe transversal au centre, c'est-à-dire le centrage vertical.

　Dans le style du projet, nous définissons l'attribut flex sur 1 afin que le projet puisse répartir uniformément l'espace restant. Dans le même temps, la hauteur du projet est définie sur 100 px et la couleur d'arrière-plan est définie pour le projet.

　L'exemple ci-dessus montre comment utiliser la disposition flexible pour obtenir l'effet de diviser une ligne en deux. Ci-dessous, nous présentons quelques autres techniques de mise en page flexibles couramment utilisées.

　1. Disposition à trois colonnes de largeur égale

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

<style>
.container {
  display: flex;
}

.item {
  flex: 1;
  height: 100px;
  background-color: #ff9900;
}
</style>

　En définissant le conteneur sur une disposition flexible, puis en définissant la propriété flex de l'élément sur 1, vous pouvez obtenir un effet de disposition à trois colonnes de largeur égale.

　 2. Disposition à deux colonnes avec une hauteur égale

<div class="container">
  <div class="left-item">左侧项目</div>
  <div class="right-item">右侧项目</div>
</div>

<style>
.container {
  display: flex;
}

.left-item {
  flex: 1;
  height: 200px;
  background-color: #ff9900;
}

.right-item {
  flex: 1;
  height: 200px;
  background-color: #00ccff;
}
</style>

En définissant le conteneur sur une disposition flexible, puis en définissant les propriétés flex des éléments gauche et droit sur 1, vous pouvez obtenir une disposition à deux colonnes avec une hauteur égale.

　3. Centrage horizontal et vertical

<div class="container">
  <div class="item">项目</div>
</div>

<style>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
  background-color: #ff9900;
}

.item {
  flex: 1;
  height: 100px;
  background-color: #00ccff;
}
</style>

　En définissant le conteneur sur une disposition flexible, puis en définissant les propriétés justifier-contenu et align-items sur centre, vous pouvez obtenir des effets de centrage horizontal et vertical.

À travers les exemples ci-dessus, nous pouvons voir que l’utilisation de la technologie de mise en page flexible de CSS3 peut rendre plus facile et plus flexible la création d’une interface Web moderne. En définissant correctement les propriétés des conteneurs et des projets, nous pouvons obtenir divers effets de mise en page pour répondre aux exigences des utilisateurs en matière d'interfaces Web. Dans le développement réel, nous pouvons utiliser de manière flexible diverses techniques de mise en page flexibles selon les besoins pour créer une interface Web attrayante et réactive.

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!