recherche

Maison >interface Web >tutoriel CSS >Comment implémenter le flux en cascade en CSS ? Deux façons de présenter

Comment implémenter le flux en cascade en CSS ? Deux façons de présenter

青灯夜游
青灯夜游avant
2021-09-26 10:58:144955parcourir

Comment implémenter un flux en cascade avec CSS ? L'article suivant vous présentera deux façons d'utiliser CSS pour implémenter le flux en cascade. J'espère qu'il vous sera utile !

Comment implémenter le flux en cascade en CSS ? Deux façons de présenter

Le flux en cascade, également connu sous le nom de disposition en cascade, est une méthode de mise en page de site Web populaire. Il est souvent utilisé lors de l’affichage de plusieurs images sur des téléphones mobiles. Autrement dit, plusieurs rangées d'éléments de même largeur sont disposées et les éléments suivants y sont ajoutés en séquence, avec une largeur égale et une hauteur inégale. Ils sont mis à l'échelle en fonction de la proportion originale de l'image jusqu'à ce que la largeur atteigne nos exigences, puis. placé à la position désignée selon les règles.

Alors, quelles sont les méthodes de mise en œuvre de l'aménagement d'un flux en cascade ?

column Disposition multiligne pour implémenter le flux en cascadecolumn 多行布局实现瀑布流

column 实现瀑布流主要依赖两个属性。

column-count 属性，是控制屏幕分为多少列。

column-gap 属性，是控制列与列之间的距离。

<!DOCTYPE html>
<html lang="en"><head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>瀑布流布局-column</title>
  <style>
    .box {
          margin: 10px;
          column-count: 3;
          column-gap: 10px;
      }
      .item {
          margin-bottom: 10px;
      }
      .item img{
          width: 100%;
          height:100%;
      }
  </style>
</head>
<body>
  <div class="box">
    <div class="item">
      <img  src="./imgs/1.jpg" alt="1" />
    </div>
    <div class="item">
      <img  src="./imgs/2.jpg" alt="2" />
    </div>
    <div class="item">
      <img  src="./imgs/3.jpg" alt="3" />
    </div>
    <div class="item">
      <img  src="./imgs/1.jpg" alt="1" />
    </div>
    <div class="item">
      <img  src="./imgs/2.jpg" alt="2" />
    </div>
    <div class="item">
      <img  src="./imgs/3.jpg" alt="3" />
    </div>
    <div class="item">
      <img  src="./imgs/1.jpg" alt="1" />
    </div>
    <div class="item">
      <img  src="./imgs/2.jpg" alt="2" />
    </div>
    <div class="item">
      <img  src="./imgs/3.jpg" alt="3" />
    </div>
    <div class="item">
      <img  src="./imgs/1.jpg" alt="1" />
    </div>
    <div class="item">
      <img  src="./imgs/2.jpg" alt="2" />
    </div>
    <div class="item">
      <img  src="./imgs/3.jpg" alt="3" />
    </div>
    <div class="item">
      <img  src="./imgs/1.jpg" alt="1" />
    </div>
    <div class="item">
      <img  src="./imgs/2.jpg" alt="2" />
    </div>
    <div class="item">
      <img  src="./imgs/3.jpg" alt="3" />
    </div>
    <div class="item">
      <img  src="./imgs/1.jpg" alt="1" />
    </div>
    <div class="item">
      <img  src="./imgs/2.jpg" alt="2" />
    </div>
    <div class="item">
      <img  src="./imgs/3.jpg" alt="3" />
    </div>
    <div class="item">
      <img  src="./imgs/1.jpg" alt="1" />
    </div>
    <div class="item">
      <img  src="./imgs/2.jpg" alt="2" />
    </div>
    <div class="item">
      <img  src="./imgs/3.jpg" alt="3" />
    </div>
    <div class="item">
      <img  src="./imgs/1.jpg" alt="1" />
    </div>
    <div class="item">
      <img  src="./imgs/2.jpg" alt="2" />
    </div>
    <div class="item">
      <img  src="./imgs/3.jpg" alt="3" />
    </div>
  </div>
</body>
</html>

Comment implémenter le flux en cascade en CSS ? Deux façons de présenter

flex 弹性布局实现瀑布流

flex 实现瀑布流需要将最外层元素设置为 display: flex，使用弹性布局

flex-flow:column wrap 使其纵向排列并且换行换行

设置 height: 100vh 填充屏幕的高度，也可以设置为单位为 px 的高度，来容纳子元素。

每一列的宽度可用 calc 函数来设置，即 width: calc(100%/3 - 20px)。分成等宽的 3 列减掉左右两遍的 margin

column L'implémentation du flux en cascade repose principalement sur deux attributs. L'attribut

column-count contrôle le nombre de colonnes en lesquelles l'écran est divisé. L'attribut Comment implémenter le flux en cascade en CSS ? Deux façons de présenter

column-gap contrôle la distance entre les colonnes. 

<!DOCTYPE html>
<html lang="en"><head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .box {
        display: flex;  
        flex-flow: column wrap;
        height: 100vh;
      }
      .item {
        margin: 10px;
        width: calc(100%/3 - 20px);
      }
      .item img{
        width: 100%;
        height:100%;
      }
  </style>
</head>
<body>
  <div class="box">
    <div class="item">
      <img  src="./imgs/1.jpg" alt="1" />
    </div>
    <div class="item">
      <img  src="./imgs/2.jpg" alt="2" />
    </div>
    <div class="item">
      <img  src="./imgs/3.jpg" alt="3" />
    </div>
    <div class="item">
      <img  src="./imgs/1.jpg" alt="1" />
    </div>
    <div class="item">
      <img  src="./imgs/2.jpg" alt="2" />
    </div>
    <div class="item">
      <img  src="./imgs/3.jpg" alt="3" />
    </div>
    <div class="item">
      <img  src="./imgs/1.jpg" alt="1" />
    </div>
    <div class="item">
      <img  src="./imgs/2.jpg" alt="2" />
    </div>
    <div class="item">
      <img  src="./imgs/3.jpg" alt="3" />
    </div>
    <div class="item">
      <img  src="./imgs/1.jpg" alt="1" />
    </div>
    <div class="item">
      <img  src="./imgs/2.jpg" alt="2" />
    </div>
    <div class="item">
      <img  src="./imgs/3.jpg" alt="3" />
    </div>
    <div class="item">
      <img  src="./imgs/1.jpg" alt="1" />
    </div>
  </div>
</body>
</html>
Comment implémenter le flux en cascade en CSS ? Deux façons de présenter

flex Disposition flexible pour implémenter un flux en cascade

flex Pour implémenter un flux en cascade, vous devez définir le flux le plus externe élément à afficher : flex, utilisez une mise en page flexible

flex-flow:column wrap pour l'organiser verticalement et l'envelopper dans de nouvelles lignes

Définir hauteur : 100vh pour remplir l'écran. La hauteur peut également être définie sur la hauteur en unités de px pour accueillir les éléments enfants. La largeur de chaque colonne peut être définie avec la fonction calc, c'est-à-dire width: calc(100%/3 - 20px). Divisez en 3 colonnes de largeur égale moins la distance marge deux fois à gauche et à droite.

🎜rrreee🎜L'effet d'affichage est le suivant🎜🎜🎜🎜🎜🎜Code de cas🎜🎜🎜Code d'implémentation du flux de cascade : https://gitee.com/yunxii/css-demo/tree/master/waterfall🎜🎜🎜Adresse d'origine : https://juejin.cn/post/7011333433318178846🎜🎜Auteur : tangxd3🎜🎜🎜Pour plus de connaissances sur la programmation, veuillez visiter : 🎜Vidéo de programmation🎜 ! ! 🎜

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 count display margin column flex https gitee
Déclaration：
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer
Article précédent：Apprenez-en davantage sur :is() et :where() en CSS pour rendre votre code de style plus concis !Article suivant：Apprenez-en davantage sur :is() et :where() en CSS pour rendre votre code de style plus concis !

Articles Liés

Voir plus