Un guide des propriétés de mise en page flexibles CSS : position sticky et flexbox

Guide des propriétés de mise en page flexible CSS : position collante et flexbox

Dans la conception Web moderne, la mise en page flexible est devenue une technologie très populaire et utile. Cela peut nous aider à créer des mises en page Web adaptatives afin que les pages Web puissent s'afficher et répondre correctement sur différents appareils et tailles d'écran.

Cet article se concentrera sur deux propriétés de mise en page flexibles : position : sticky et flexbox. Nous discuterons de leur utilisation en détail et démontrerons leur application à travers des exemples de code concrets.

1. position: sticky

position: sticky est une propriété CSS puissante qui permet aux éléments de rester dans une position spécifique lors du défilement. Son utilisation est très simple. Il vous suffit de définir position: sticky sur l'élément et de spécifier une valeur haut, bas, gauche ou droite pour fixer l'élément dans une position par rapport à la fenêtre de visualisation.

Voici un exemple spécifique :

Code HTML :

<div class="container">
  <div class="header">我是头部</div>
  <div class="content">我是内容</div>
  <div class="footer">我是尾部</div>
</div>

Code CSS :

.container {
  height: 400px;
  overflow-y: scroll;
}

.header {
  position: sticky;
  top: 0;
  background-color: red;
}

.content {
  height: 1000px;
  background-color: yellow;
}

.footer {
  height: 200px;
  background-color: green;
}

Dans le code ci-dessus, nous créons un conteneur d'une hauteur de 400px et définissons le défilement vertical. Ensuite, nous définissons l’élément d’en-tête sur sticky, en l’ancrant au sommet du conteneur.

Lorsque nous faisons défiler la page dans le navigateur, l'élément d'en-tête restera toujours en haut du conteneur et ne disparaîtra pas lors du défilement de la page. Cela nous permet d'implémenter facilement des effets tels que des barres de navigation et des barres de titre fixes.

2. Flexbox

Flexbox est une mise en page de modèle de boîte flexible introduite par CSS3, qui peut rendre la mise en page des pages Web plus flexible et adaptative. Avec flexbox, nous pouvons facilement contrôler la position, la taille et la disposition des éléments dans le conteneur.

Voici un exemple spécifique :

Code HTML :

<div class="container">
  <div class="box">盒子1</div>
  <div class="box">盒子2</div>
  <div class="box">盒子3</div>
</div>

Code CSS :

.container {
  display: flex;
  justify-content: space-between;
}

.box {
  width: 100px;
  height: 100px;
  background-color: blue;
  margin: 10px;
}

Dans le code ci-dessus, nous créons un conteneur et définissons sa propriété d'affichage sur flex, indiquant qu'il s'agit d'un conteneur flexbox. Nous utilisons également l'attribut justifier-content pour définir l'alignement horizontal des trois éléments enfants sur l'espace entre, afin que l'espace entre les éléments enfants soit égal.

Chaque élément enfant a sa largeur et sa hauteur définies, sa couleur d'arrière-plan est bleue et ses marges sont définies.

Avec le code ci-dessus, nous avons implémenté une disposition simple de flexbox. Les trois éléments de la boîte ajusteront automatiquement leur taille et leur position pour s'adapter à la taille et aux besoins du conteneur.

Résumé :

Cet article présente deux propriétés de mise en page flexibles très utiles : position : sticky et flexbox. position : sticky peut nous aider à obtenir l'effet fixe de défilement des éléments, tandis que flexbox peut rendre la mise en page de la page Web plus flexible et adaptative. Grâce aux exemples de code ci-dessus, nous pouvons clairement comprendre l'utilisation et les effets de ces deux propriétés.

J'espère que cet article pourra aider tout le monde à mieux comprendre et utiliser ces deux attributs de mise en page élastiques, apportant ainsi plus de commodité et de flexibilité à la conception et au développement Web.

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!