Explorer les propriétés de disposition du panneau CSS : flex et grille

Exploration des propriétés de mise en page des panneaux CSS : flex et grille

Dans le développement Web moderne, la mise en page est un aspect crucial. Dans le passé, nous utilisions une largeur et une hauteur fixes pour contrôler la mise en page, mais avec l’essor du responsive design, nous avons besoin d’une méthode de mise en page plus flexible et adaptative. CSS fournit des propriétés de mise en page puissantes, dont les plus couramment utilisées sont flex et grid. Cet article explique comment utiliser ces deux propriétés et fournit des exemples de code spécifiques.

1. flex layout

flex layout est un mode de mise en page flexible introduit dans CSS3. Il place les éléments enfants dans le conteneur sur un axe principal et les dispose selon les règles d'allocation d'espace sur l'axe principal. Voici quelques attributs flex couramment utilisés :

• display: flex; : définit le conteneur sur une disposition flexible
• flex-direction : spécifiez la direction de l'axe principal, qui peut être une ligne (direction horizontale par défaut), une colonne (verticale). direction), row-reverse (direction horizontale inversée) ou column-reverse (direction verticale inversée)
• justify-content : Spécifiez l'alignement des éléments enfants sur l'axe principal, qui peut être flex-start (alignement de départ), flex- end (alignement des extrémités), centre (aligné au centre), espace entre (aligné aux deux extrémités, avec un espacement égal au milieu) ou espace autour (aligné aux deux extrémités, avec un espacement égal entre les sous-éléments)
• align-items : spécifiez la position des éléments enfants sur l'alignement de l'axe transversal, qui peut être flex-start (alignement supérieur), flex-end (alignement inférieur), center (alignement central), ligne de base (alignement de la ligne de base) ou étirement ( étirement de l'alignement)
• flex-wrap : Spécifiez si l'élément enfant s'enroule, peut être nowrap (pas de retour à la ligne, par défaut), wrap (retour à la ligne) ou wrap-reverse (retour à la ligne inversé)

Ce qui suit est un simple flex exemple de mise en page :

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

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

2. disposition en grille

la disposition en grille est en CSS3 Un autre système de mise en page puissant. Il divise le conteneur en lignes et colonnes et spécifie dans quelle cellule les éléments enfants doivent être placés. Voici quelques attributs de grille couramment utilisés :

• display: grid; : définissez le conteneur sur une disposition en grille
• grid-template-columns : spécifiez le nombre et la largeur des colonnes, vous pouvez utiliser des pixels (px), un pourcentage ( %), ou Vous pouvez utiliser automatique (auto) ou fractionnaire (fr)
• grid-template-rows : Précisez le nombre et la hauteur des lignes, l'utilisation est la même que ci-dessus
• grid-column-gap : Précisez l'écart entre les colonnes
• grid-row-gap : spécifiez l'espacement entre les lignes
• grid-template-areas : spécifiez le nom de chaque cellule, défini à l'aide d'une matrice d'identifiants littéraux

Voici un exemple simple de disposition de grille :

<style>
.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}

.item {
  background-color: #ddd;
  padding: 10px;
}
</style>

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

En résumé Comme mentionné ci-dessus, flex et grid sont des propriétés de mise en page couramment utilisées dans le développement Web moderne. Ils offrent de puissantes capacités de mise en page qui nous permettent de créer des mises en page flexibles et adaptatives. En utilisant rationnellement ces attributs, nous pouvons mieux contrôler la mise en page des pages Web et améliorer l'expérience utilisateur.

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!