瀑布流布局 flex实现（二）

最新推荐文章于 2024-11-07 11:05:32 发布

ThawingX

最新推荐文章于 2024-11-07 11:05:32 发布

阅读量1.9k

点赞数

分类专栏： CSS Inspiration 文章标签： css css3 html

本文链接：https://blog.csdn.net/qq_48626600/article/details/122906352

版权

CSS Inspiration 专栏收录该内容

7 篇文章

订阅专栏

本文详细介绍了如何使用CSS3的Flexbox布局来实现瀑布流效果，包括横向和纵向布局的嵌套，通过设置每列宽度，结合HTML和SCSS代码展示具体实现步骤，并提供了最终的布局效果图。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

关键点

横向flex布局嵌套多列纵向flex 布局

使用flex-basis 定义每一列宽

代码

html

<div class="container">
      <div class="queue">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
      </div>
      <div class="queue">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
      </div>
      <div class="queue">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
      </div>
      <div class="queue">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
      </div>
</div>

scss


.container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  overflow: hidden;
}
.queue {
  display: flex;
  flex-direction: column;
  flex-basis: 24%;
}

.item {
  position: relative;
  width: 100%;
  margin: 2.5% 0;
}

// 随机生成内容
$lineCount: 4;
$count: 3;
@function randomNum($max, $min: 0, $u: 1) {
  @return ($min + random($max)) * $u;
}

@function randomColor() {
  @return rgb(randomNum(255), randomNum(255), randomNum(255));
}

@for $i from 1 to $lineCount + 1 {
  .queue:nth-child(#{$i}) {
    @for $j from 1 to $count + 1 {
      .item:nth-child(#{$j}) {
        height: #{randomNum(300, 50)}px;
        background-color: randomColor();

        &::after {
          content: "#{$j}";
          position: absolute;
          color: #fff;
          font-size: 24px;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }
      }
    }
  }
}

效果图

flex实现瀑布流效果图