Apprenez la technologie flexbox de CSS3 et créez facilement une mise en page fluide.

Apprenez la technologie CSS3 flexbox et créez facilement une mise en page Web fluide

Dans la conception Web moderne, la mise en page Web est un élément crucial. Une bonne mise en page de page Web peut rendre la page Web plus fluide et plus belle. Dans le passé, nous utilisions généralement des techniques de mise en page traditionnelles, telles que l'utilisation d'attributs float ou position pour implémenter la mise en page des pages Web. Cependant, ces méthodes traditionnelles aboutissent souvent à des mises en page qui ne sont pas suffisamment flexibles pour s'adapter aux différentes tailles d'écran et aux différents appareils. La technologie flexbox fournie dans CSS3 peut résoudre ces problèmes.

flexbox est le dernier modèle de mise en page en CSS3, basé sur le concept de flexbox. Grâce à flexbox, nous pouvons facilement contrôler la position, la taille et la disposition de divers éléments dans la mise en page de la page Web. Ci-dessous, je présenterai quelques propriétés flexbox couramment utilisées et des exemples de code pour aider tout le monde à mieux comprendre et maîtriser cette technologie.

1. Conteneurs et éléments

Dans flexbox, nous appelons l'élément parent de la mise en page Web un conteneur, et les éléments enfants de la mise en page sont appelés éléments. Les conteneurs et les éléments ont des propriétés communes utilisées pour contrôler la disposition.

• Attribut Container

  • display : utilisé pour définir un conteneur en utilisant la mise en page flex, la valeur par défaut est flex.
  • flex-direction : utilisé pour définir le sens de disposition des éléments, la valeur par défaut est row.
  • flex-wrap : utilisé pour définir la méthode de retour à la ligne des éléments, la valeur par défaut est nowrap.
  • justify-content : utilisé pour définir l'alignement des éléments sur l'axe principal, la valeur par défaut est flex-start.
  • align-items : utilisé pour définir l'alignement des éléments sur l'axe transversal, la valeur par défaut est stretch.
  • align-content : utilisé pour définir l'alignement de la mise en page multiligne, la valeur par défaut est stretch.

• Propriétés des éléments

  • ordre : utilisé pour définir l'ordre des éléments, la valeur par défaut est 0.
  • flex-grow : utilisé pour définir le taux de grossissement de l'élément, la valeur par défaut est 0.
  • flex-shrink : permet de définir le taux de retrait de l'article, la valeur par défaut est 1.
  • flex-basis : utilisé pour définir l'espace occupé par l'élément dans le conteneur, la valeur par défaut est auto.
  • flex : attribut abrégé utilisé pour définir les trois attributs ci-dessus.

2. Exemple de mise en page de base

Ce qui suit montre un exemple de mise en page de base d'une page Web avec deux projets :

Code HTML :

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

Code CSS :

.container {
  display: flex;
}

.item {
  flex: 1;
  background-color: #ccc;
  padding: 20px;
  margin: 10px;
}

Dans l'exemple ci-dessus, nous avons utilisé la propriété flex alloue espace pour les articles. Étant donné que les éléments ont tous une valeur de propriété flex de 1, ils divisent également l'espace disponible du conteneur. En même temps, dans le style de la classe .item, nous définissons également la couleur d’arrière-plan, les marges intérieures et extérieures de l’élément.

3. Exemple de centrage horizontal et vertical

En utilisant flexbox, nous pouvons facilement obtenir des effets de disposition de centrage horizontal et vertical. Ci-dessous montre un exemple de mise en page de page Web alignée au centre :

Code HTML :

<div class="container">
  <div class="item">居中对齐</div>
</div>

Code CSS :

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
}

.item {
  background-color: #ccc;
  padding: 20px;
}

Dans l'exemple ci-dessus, nous utilisons les attributs justifier-contenu et align-items pour centrer les éléments sur la page principale. axe et axe transversal. Dans le même temps, nous utilisons également un conteneur d’une hauteur spécifiée pour garantir que les articles sont centrés verticalement.

Résumé

En apprenant la technologie flexbox de CSS3, nous pouvons facilement créer des mises en page Web fluides et flexibles. Grâce à l'utilisation flexible des propriétés du conteneur et du projet, nous pouvons obtenir divers effets de mise en page. J'espère que l'exemple de code ci-dessus pourra aider tout le monde à mieux comprendre et maîtriser la technologie flexbox, et pourra l'utiliser de manière flexible dans la conception Web future.

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!