Maison > Article > interface Web > Comment obtenir un effet de défilement horizontal grâce à la mise en page CSS Flex

Comment obtenir un effet de défilement horizontal grâce à la mise en page CSS Flex

王林original: 2023-09-27 14:05:012020parcourir

如何通过Css Flex 弹性布局实现横向滚动效果

Comment obtenir un effet de défilement horizontal grâce à la disposition élastique CSS Flex

Résumé :
Dans le développement Web, nous devons parfois afficher une série d'éléments dans un conteneur et espérer que ces éléments puissent défiler horizontalement. À ce stade, vous pouvez utiliser la disposition élastique CSS Flex pour obtenir l'effet de défilement horizontal. Nous pouvons facilement obtenir cet effet en ajustant les propriétés du conteneur avec un simple code CSS. Dans cet article, je vais vous présenter comment utiliser CSS Flex pour obtenir un effet de défilement horizontal et fournir des exemples de code spécifiques.

Introduction à la mise en page flexible CSS Flex :
CSS Flex est une méthode de mise en page développée par le W3C, qui est un modèle de mise en page utilisé pour organiser et distribuer des éléments dans des conteneurs. En utilisant CSS Flex, nous pouvons facilement réaliser une disposition horizontale ou verticale des éléments, ainsi qu'un contrôle flexible sur l'allocation de l'espace entre les éléments.

Étape 1 : Créer une structure HTML
Tout d'abord, nous devons créer une structure HTML qui contient un div de conteneur et les éléments qu'il contient. Le code HTML est le suivant :

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <!-- 在这里添加更多的项目 -->
</div>

Étape 2 : définir la propriété CSS Flex
Ensuite, nous devons définir la propriété CSS Flex du div du conteneur pour obtenir l'effet de défilement horizontal. Le code CSS spécifique est le suivant :

.container {
  display: flex;
  overflow-x: scroll;
  /* 横向滚动 */
  white-space: nowrap;
  /* 防止项目换行显示 */
}

.item {
  flex: 0 0 auto;
  /* 设置项目为固定宽度 */
  width: 200px;
  /* 设置项目的宽度 */
  margin-right: 10px;
  /* 设置项目之间的间距 */
}

Explication du code CSS :

display : flex ; Définissez le conteneur sur la disposition Flex.
overflow-x: scroll; Définit la barre de défilement pour qu'elle apparaisse horizontalement dans le conteneur.
white-space : nowrap ; empêche les éléments de s'enrouler dans une autre ligne.
flex : 0 0 auto ; Définissez l'élément sur une largeur fixe.
width : 200px ; Définissez la largeur de l’élément.
margin-right : 10px ; Définissez l'espacement entre les éléments.

Étape 3 : Exécutez l'effet
Intégrez le code HTML et le code CSS ensemble et enregistrez-les sous forme de fichier HTML. Ouvrez ensuite le fichier HTML dans votre navigateur et vous verrez un conteneur avec un effet de défilement horizontal. À l’aide de la barre de défilement ou de la molette de la souris, vous pouvez faire défiler horizontalement tous les éléments.

L'exemple de code complet est le suivant :

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      display: flex;
      overflow-x: scroll;
      white-space: nowrap;
    }

    .item {
      flex: 0 0 auto;
      width: 200px;
      margin-right: 10px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <!-- 添加更多项目 -->
  </div>
</body>
</html>

Résumé :
En utilisant la disposition élastique CSS Flex, nous pouvons facilement obtenir l'effet de défilement horizontal. En définissant la propriété CSS Flex du conteneur, nous pouvons contrôler la disposition et l'espacement des éléments, ainsi que l'apparition ou non des barres de défilement. Ce qui précède est un exemple simple que vous pouvez personnaliser et étendre en fonction de vos besoins. J'espère que cet article vous aidera à obtenir des effets de défilement horizontal dans le 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!

css html auto display overflow margin flex

Déclaration：

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

Article précédent：Explication détaillée du positionnement absolu et des effets en cascade dans la mise en page flexible CSS FlexArticle suivant：Explication détaillée du positionnement absolu et des effets en cascade dans la mise en page flexible CSS Flex

Articles Liés

Voir plus