CSS如何优雅的实现卡片多行排列布局?

欢迎关注本专栏,会经常分享一些简单实用的技巧!

感谢各位大佬点赞!关注我,学习实用前端知识!

需求简介

在前端开发中,我们经常遇见这样的开发需求,实现下列以此排布的卡片,这些卡片宽度一般是固定的,

并且在不同大小的屏幕宽度下自动换行。

实际开发中遇到的问题

实现这样的一个需求其实不难,我们很容易想到设置一个安全宽度(如下图绿色),然后进行弹性布局。

一个很容易写出的代码是这样的:

css 复制代码
<template>
  <div class="container">
    <div class="crad">1</div>
    <div class="crad">2</div>
    <div class="crad">3</div>
    <div class="crad">4</div>
    <div class="crad">5</div>
    <div class="crad">6</div>
  </div>
</template>
<style lang="less" scoped>
.container{
  width:630px;
  display: flex;
  justify-content: space-between;
  flex-flow: wrap;
  .crad{
    height:100px;
    background: blueviolet;
    width:200px;
    margin-bottom: 16px;
  }
}
</style>

使用flex弹性布局,我们很看似轻松的实现了需求。但是,当我们将卡片数量减少一个,问题就出现了

css 复制代码
<template>
<div class="container">
  <div class="crad">1</div>
  <div class="crad">2</div>
  <div class="crad">3</div>
  <div class="crad">4</div>
  <div class="crad">5</div>
</div>
</template>

由于我们使用了justify-content: space-between;的布局方式,4,5卡片左右对称布局,这显然不符合我们的要求!

聪明的人,可能会把justify-content: space-between改成align-content: space-between

css 复制代码
<style lang="less" scoped>
.container{
  width:630px;
  display: flex;
  align-content: space-between;
  flex-flow: wrap;
  .crad{
    height:100px;
    background: blueviolet;
    width:200px;
    margin-bottom: 16px;
  }
}
</style>

这样的确会让卡片以此排列,但是没了右边距!因此,你可能会手动加上右边距

css 复制代码
<style lang="less" scoped>
.container{
  width:630px;
  display: flex;
  align-content: space-between;
  flex-flow: wrap;
  .crad{
    height:100px;
    background: blueviolet;
    width:200px;
    margin-bottom: 16px;
    margin-right: 16px;
  }
}
</style>

你会尴尬的发现换行了,因为两个卡片的宽度加元素的右边距之和大于你设置的安全宽度了!

当然,你可以让每个卡片的右边距小一点,这样不会换行,但是,右边的元素永远无法贴边了!

如何解决这个问题

想解决上的问题,也有很多方法。

如果永远是第3n的元素是最后一列,这个问题非常容易解决:

css 复制代码
.container{
  display: flex;
  width:630px;
  align-content: space-between;
  flex-flow: wrap;
  .crad{
    height:100px;
    background: blueviolet;
    width:200px;
    margin-bottom: 16px;
    margin-right: 16px;
    &:nth-child(3n) {
      margin-right: 0;
    }
  }
}

4n,5n,6n我们都可以用这样的方式解决!

但如果安全宽度是变化的(630px不固定),比如随着浏览器尺寸的变化,每行的卡片数量也变化,上述方式就无法解决了。

此时,我们可以用下面的方法:

我们可以在绿色盒子外在套一个红色盒子,超出红色盒子的部分隐藏即可

代码如下

css 复制代码
<template>
  <div class="card-content-box">
    <div class="container">
        <div class="crad">1</div>
        <div class="crad">2</div>
        <div class="crad">3</div>
        <div class="crad">4</div>
        <div class="crad">5</div>
   </div>
  </div>
</template>
<style lang="less" scoped>
.card-content-box{
    width:100%;
    background:red;
    overflow: hidden;
    .container{
      width: calc(100% + 16px);
      display: flex;
      justify-content: space-between;
      flex-flow: wrap;
      .crad{
        height:100px;
        background: blueviolet;
        width:200px;
# margin-bottom: 16px;
      }
    }
}
</style>

上述代码中,我们的container元素设置了width: calc(100% + 16px)保证其比父元素多出16px的容错边距,然后我们给红色盒子设置了overflow: hidden,就避免了滚动条出现。

完美解决了这个布局问题!

往期精彩文章

相关推荐
光影少年3 小时前
angular生态及学习路线
前端·学习·angular.js
无尽夏_5 小时前
HTML5(前端基础)
前端·html·html5
Jagger_5 小时前
敏捷开发流程-精简版
前端·后端
FIN66686 小时前
昂瑞微冲刺科创板:创新驱动,引领射频芯片国产化新征程
前端·安全·前端框架·信息与通信·芯片
GISer_Jing6 小时前
ByteDance——jy真题
前端·javascript·面试
睡美人的小仙女1276 小时前
浏览器为何屏蔽本地文件路径?
前端
真的想不出名儿6 小时前
Vue 中 props 传递数据的坑
前端·javascript·vue.js
FIN66686 小时前
昂瑞微:深耕射频“芯”赛道以硬核实力冲刺科创板大门
前端·人工智能·科技·前端框架·信息与通信·智能
阳光阴郁大boy6 小时前
星座运势网站技术解析:从零打造现代化Web应用
前端·javascript
烛阴6 小时前
武装你的Python“工具箱”:盘点10个你必须熟练掌握的核心方法
前端·python