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 !
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>
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
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>
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 flexibleflex-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.
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!