Comment utiliser la disposition élastique CSS Flex pour implémenter la disposition des cartes coulissantes

Comment utiliser Css Flex Flexible Layout pour implémenter la disposition des cartes coulissantes

Dans le développement Web moderne, la mise en page flexible (Flexbox) devient de plus en plus populaire. Il s'agit d'un module CSS pour les éléments de positionnement et de mise en page qui peut facilement obtenir divers effets de mise en page complexes. Cet article explique comment utiliser la disposition élastique Flex pour implémenter la disposition des cartes coulissantes et fournit des exemples de code spécifiques.

La disposition des cartes coulissantes est un modèle de conception d'interface utilisateur courant, souvent utilisé pour afficher des images ou du contenu. Chaque carte peut être passée à la suivante en faisant glisser ou en appuyant. Dans cette disposition, les cartes sont généralement disposées horizontalement, montrant une carte complète et une seule carte à la fois.

Tout d’abord, nous avons besoin d’un conteneur parent contenant toutes les cartes. En utilisant la disposition Flexbox, nous définirons le conteneur comme un conteneur flexible et spécifierons que la direction de l'axe principal doit être horizontale. Ensuite, nous allons créer un élément enfant pour chaque carte et le placer dans le conteneur parent. Jetons un coup d'œil à un exemple de code spécifique :

Code HTML :

<div class="card-container">
  <div class="card">Card 1</div>
  <div class="card">Card 2</div>
  <div class="card">Card 3</div>
  <div class="card">Card 4</div>
</div>

Code CSS :

.card-container {
  display: flex;
  flex-direction: row;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
}

.card {
  flex: 0 0 100%; /* 每个卡片的宽度为父容器宽度 */
  scroll-snap-align: start; /* 卡片以卡片容器的起点对齐 */
  padding: 20px;
  background-color: #f0f0f0;
  border-radius: 10px;
  margin-right: 20px;
}

Dans le code ci-dessus, nous définissons d'abord .card-container comme conteneur flexible et définissons The L'attribut flex-direction est défini sur row, ce qui signifie que les cartes sont disposées horizontalement. Pour obtenir l'effet de glissement, nous définissons overflow-x: scroll, qui activera les barres de défilement horizontales lorsque le conteneur est plus large que le conteneur parent. Nous utilisons également scroll-snap-type: x obligatoire pour activer l'effet de défilement instantané afin de garantir qu'une seule carte complète est affichée à chaque fois que vous faites défiler. .card-container设置为弹性容器，并设置了flex-direction属性为row，这意味着卡片是水平排列的。为了实现滑动效果，我们设置了overflow-x: scroll，这将在容器的宽度超过父容器时启用水平滚动条。我们还使用scroll-snap-type: x mandatory来启用滚动吸附效果，确保每次滚动时只显示一个完整的卡片。

对于每个卡片，我们使用了flex来指定卡片的宽度为父容器的宽度。使用scroll-snap-align: start

Résumé

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!