Maison > interface Web > tutoriel CSS > le corps du texte

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

PHPz
Libérer: 2023-10-27 10:06:55
original
1311 Les gens l'ont consulté

CSS 弹性布局属性指南:position sticky 和 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>
Copier après la connexion

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;
}
Copier après la connexion

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>
Copier après la connexion

Code CSS :

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

.box {
  width: 100px;
  height: 100px;
  background-color: blue;
  margin: 10px;
}
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal