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

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

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

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

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弹性布局,我们很看似轻松的实现了需求。但是,当我们将卡片数量减少一个,问题就出现了

<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卡片左右对称布局,这显然不符合我们的要求!

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

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

<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>

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

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

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

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

如何解决这个问题

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

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

.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如何优雅的实现卡片多行排列布局?

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

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

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;
      align-content: space-between;
      flex-flow: wrap;
      .crad{
        height:100px;
        background: blueviolet;
        width:200px;
# margin-bottom: 16px;
      }
    }
}
</style>
CSS如何优雅的实现卡片多行排列布局?

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

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

转载作品,原作者:稀土掘金技术社区,文章来源:https://mp.weixin.qq.com/s/TY8rQrPaoGSHCJF7jJqWFw

(0)
打赏 微信赞赏 微信赞赏 支付宝赞赏 支付宝赞赏
上一篇 2025-01-23 10:39
下一篇 2024-08-08 11:15

相关推荐

  • 常用的一些CSS代码规则

    常用的一些CSS代码规则:限制视口内的内容宽度、增加正文文本大小、增加文本行之间的间距、限制图片宽度、限制内容中文本的宽度、以更平衡的方式包裹标题、表单控件颜色与页面样式匹配、易于跟随的表格行

    2024-08-08 Html/CSS
    3910
  • 有趣的css – 简约文字风格导航栏

    利用单选按钮来模拟导航栏点击选中效果,实现一个简约的文字类导航栏。 核心代码部分,简要说明了写法思路;完整代码在最后,可直接复制到本地运行。 导航栏主体结构html代码: css …

    2025-01-22
    1770
  • Safari浏览器内容被地址栏、菜单栏或工具栏遮挡导致的兼容问题

    最近写了一个网页,页面很多元素使用的是Fixed定位,当在手机端的Safari浏览器、安卓浏览器等测试时,会出现顶部元素、底部元素 被地址栏、菜单栏或工具栏遮挡的情况。于是,我查阅…

    2024-11-27
    4910
  • 一行 CSS 代码实现响应式布局 – 使用 Grid 实现的响应式布局

    在这篇文章中,我将教你如何使用 CSS Grid(网格) 布局来创建一个超酷的图像网格,它会根据屏幕的宽度改变列的数量,以实现响应式布局。 而这篇文章中最漂亮的部分是:添加一行 C…

    2025-01-23 Html/CSS
    1650
  • 分享几个CSS4操作小技巧,助你代码开挂

    1.::part() 让组件更加灵活 如果你在开发Web组件(Web Components),::part() 让你能直接控制组件的部分元素。它能改变一个封装元素内部的某些样式。 …

    2025-01-17
    1890
  • CSS适配iOS全面屏底部横条

    CSS适配iOS全面屏底部横条,所有开发者应对资源页面做好不同手机型号的适配效果,不影响用户的正常浏览使用。其中IOS全面屏手机底部横线不可遮挡页面的具体功能和内容。

    2023-12-28
    3880

发表回复

登录后才能评论
扫码了解
扫码了解
分享本页
返回顶部