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

简介: 【8月更文挑战第24天】CSS如何优雅实现卡片多行排列布局?

需求简介

在前端开发中,我们经常遇见这样的开发需求,实现下列以此排布的卡片,这些卡片宽度一般是固定的,
image.png
并且在不同大小的屏幕宽度下自动换行。
image.png

实际开发中遇到的问题

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

<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卡片左右对称布局,这显然不符合我们的要求!
image.png
聪明的人,可能会把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>

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

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

你会尴尬的发现换行了,因为两个卡片的宽度加元素的右边距之和大于你设置的安全宽度了!
image.png
当然,你可以让每个卡片的右边距小一点,这样不会换行,但是,右边的元素永远无法贴边了!
image.png

如何解决这个问题

想解决上的问题,也有很多方法。
如果永远是第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不固定),比如随着浏览器尺寸的变化,每行的卡片数量也变化,上述方式就无法解决了。
Untitled.gif
此时,我们可以用下面的方法:
我们可以在绿色盒子外在套一个红色盒子,超出红色盒子的部分隐藏即可image.png
代码如下

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

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

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

相关文章
|
2月前
|
前端开发 JavaScript
打造现代感十足的卡片式企业官网:HTML+CSS全攻略!
打造现代感十足的卡片式企业官网:HTML+CSS全攻略!
|
10天前
|
前端开发 容器
css布局-弹性布局学习笔记
这篇文章是关于CSS弹性布局的学习笔记,详细介绍了flex容器和元素的相关属性,包括flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content以及order、flex-grow、flex-shrink、flex-basis、flex和align-self等,解释了这些属性在弹性盒子布局中的作用和用法。
|
10天前
|
JavaScript 前端开发
网页前端课程设计-【模仿】香港中文大学官网,轮播图及div+css布局,js的dom操作
这篇文章介绍了如何模仿香港中文大学官网进行网页前端课程设计,包括使用div+css布局、js的DOM操作以及实现轮播图等技术细节。
|
2月前
|
前端开发 开发者 容器
探索现代Web开发中的CSS Grid布局技术
【8月更文挑战第29天】在数字时代的浪潮中,网页设计不断进化以适应日新月异的用户需求。CSS Grid布局技术作为一项革新性的前端工具,为设计师和开发者提供了前所未有的布局能力。本文旨在通过深入浅出的方式介绍CSS Grid的核心概念、基本用法以及在实际项目中的应用,帮助读者快速掌握这一强大的网页布局工具。
41 3
|
2月前
|
前端开发 开发者 容器
【Web布局的革命】探索CSS Grid栅格系统,打造未来网页设计!
【8月更文挑战第25天】在网页设计领域,布局至关重要。传统的布局方法难以满足复杂需求,CSS Grid 栅格系统因此诞生。它是一种二维布局模式,能直接控制行和列,简化复杂网格的设计。通过定义 `display: grid;` 创建网格容器,并利用 `grid-template-columns` 和 `grid-template-rows` 设置行列尺寸,轻松实现响应式布局。此外,CSS Grid 支持高级功能,如网格区域划分和对齐设置,极大提升了布局的灵活性和创意空间。随着浏览器兼容性的增强,CSS Grid 必将成为未来网页设计的关键技术之一。
52 1
|
2月前
|
前端开发 JavaScript
个人风采,一键展示:手把手教你HTML+CSS制作个人介绍卡片!
个人风采,一键展示:手把手教你HTML+CSS制作个人介绍卡片!
|
2月前
|
JSON 前端开发 JavaScript
使用html,css,js 实现一个龙年春节祝福卡片效果
使用html,css,js 实现一个龙年春节祝福卡片效果
44 4
|
2月前
|
前端开发 JavaScript Serverless
揭秘CSS布局神器:vw/vh、rem、%与px大PK,掌握它们,让你的网页设计秒变高大上,面试难题迎刃而解!
【8月更文挑战第4天】在Web开发中,合理选择CSS单位对响应式布局至关重要。本文探索viewport单位(vw/vh)、rem、百分比(%)及像素(px)的基础知识与应用场景。通过代码示例,展示如何运用这些单位实现全屏布局、尺寸比例调整、灵活的元素大小及固定尺寸。最后,模拟面试题,介绍如何仅用CSS实现一个元素的高度为其宽度两倍且响应视口变化的方法。
171 8
|
2月前
|
移动开发 前端开发 UED
卡片翻转,故事展开:HTML+CSS动画让信息传递更生动!(含源码)
卡片翻转,故事展开:HTML+CSS动画让信息传递更生动!(含源码)
|
2月前
|
前端开发
翻转视角:CSS让卡片设计在网页上活起来!
翻转视角:CSS让卡片设计在网页上活起来!