收藏
便签
笔记
消息
创作
登录
应无所住,而生其心
博主信息
排名
1
文章
860
粉丝
112
评论
163
文章类别
最新文章
最新评价
net core webapi post传递参数
庸人 : 确实坑哈，我也是下班好了好几次，发现后台传递对象是可以的，但...
百度编辑器自定义模板
庸人 : 我建议换个编辑器，因为现在百度富文本已经停止维护了，用tinymec...
关于我们
ICP备案 ：渝ICP备18016597号-1
网站信息：2018-2025TNBLOG.NET
技术交流：群号656732739
联系我们：contact@tnblog.net
公网安备：50010702506256
欢迎加群
欢迎加群交流技术
原

flex实现一行显示n个数量的布局，不同屏幕宽度下显示不同的数量，自适应一行显示的个数

4605人阅读 2021/8/15 18:02 总访问：5182809 评论：0 收藏：0 手机
分类: 前端

要实现的效果如下:

其实原理也非常简单，父元素主要是

主要就是设置一个flex布局，然后flex-wrap设置为需要换行

  1. .app-container {
  2.     display: flex;
  3.     flex-wrap: wrap;
  4. }

子元素主要就是设置一个宽度

子元素主要就是设置一个宽度，比如要一行显示5个就是20%，一行显示8个就是100/8=12.5%,以此类推就行了。至于其他margin-top，高度这些就是辅助样式而已。

  1. .shcoolItem {
  2.    width: 20%;
  3.    margin-top: 10px;
  4.    margin-bottom: 20px;
  5.    height: 100px;
  6.    background: #ffabcd;
  7. }

html结构这种：

  1. <div class="app-container">
  2.      <div class="shcoolItem"></div>
  3.      <div class="shcoolItem"></div>
  4.      <div class="shcoolItem"></div>
  5. </div>

但是目前这种方式虽然每个子元素可以均分宽度了，一行显示完就换行，但是每块之间就没有一点间距

如果颜色设置成一样我们都看不出来，看到的就是一块，所以我们可以把每块设置一个不一样的颜色来测试

  1. <div class="app-container">
  2.     <div class="shcoolItem "></div>
  3.     <div class="shcoolItem shcoolItemColor2"></div>
  4.     <div class="shcoolItem shcoolItemColor3"></div>
  5.     <div class="shcoolItem "></div>
  6.     <div class="shcoolItem shcoolItemColor2"></div>
  7.     <div class="shcoolItem shcoolItemColor3"></div>
  8. </div>
  10. <style >
  11.     .app-container {
  12.         display: flex;
  13.         flex-wrap: wrap;
  14.     }
  16.     .shcoolItem {
  17.       width: 20%;
  18.       height: 100px;
  19.       background: #ffabcd;
  20.     }
  22.     .shcoolItemColor2{
  23.         background: #abcdff;
  24.     }
  26.     .shcoolItemColor3{
  27.         background: #00cc66;
  28.     }
  29. </style>

效果如下，可以看到是没有间距的：

如何设置间距宽度呢

如果直接设置margin这种间距就会影响每行的显示了，因为我们使用了固定的宽度了，比如固定了宽度20%,设置了margin的话，每个子元素在占20%每行就显示不了5个了，我们就不好去控制它了，那么我们就不改子元素，我们直接去给子元素里边在加子元素，我们把样式设置到子元素里边的元素就行了撒。

html结构变成了这样：
子级里边在加了子级

  1. <div class="container">
  2.     <div class="app-container">
  3.         <div class="shcoolItem">
  4.             <div class="shcoolItemWaper"></div>
  5.         </div>
  6.         <div class="shcoolItem">
  7.             <div class="shcoolItemWaper"></div>
  8.         </div>
  9.         <div class="shcoolItem">
  10.             <div class="shcoolItemWaper"></div>
  11.         </div>
  12.     </div>
  13. </div>

我们在子元素里边的子级去设置一个margin-left,就会有间距了

  1. .shcoolItemWaper {
  2.     /* 要设置这种间距要设置到flex子元素的里边的元素，不能直接设置到flex子元素里边，
  3.     因为如果子元素算上了间距，就不能控制均分了 */
  4.     margin-left: 20px;
  5.     background: #ffabcd;
  6.     height: 100px;
  7. }

效果如下：

可以看到我们左边好想并没有对齐，因为我们给每个子元素都设置了margin-left，所以就没有对齐，要对齐也非常简单在容器那边设置一个-20px就行了

  1. .app-container {
  2.     display: flex;
  3.     flex-wrap: wrap;
  4.     margin-left: -20px;
  5. }


这里我们利用flex子元素里边的子元素来控制了间距，其实每个flex的子元素的宽度还是20%,每个flex子元素还是紧紧的挨到一起的，我们只是利用了flex的子元素里边元素的margin值来实现的，这样就不会影响每个flex元素的宽度，这样就比较好控制每行显示的个数了

如果一行不是显示固定的个数，宽度不写死，针对不同的屏幕下在去写宽度就行了

利用@media去在不同分辨率下设置宽度就行了

整体的代码如下(这里可以直接复制出来看效果)

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8. </head>
  10. <body>
  11.     <div class="container">
  12.         <div class="app-container">
  13.             <div class="shcoolItem">
  14.                 <div class="shcoolItemWaper"></div>
  15.             </div>
  16.             <div class="shcoolItem">
  17.                 <div class="shcoolItemWaper"></div>
  18.             </div>
  19.             <div class="shcoolItem">
  20.                 <div class="shcoolItemWaper"></div>
  21.             </div>
  22.             <div class="shcoolItem">
  23.                 <div class="shcoolItemWaper"></div>
  24.             </div>
  25.             <div class="shcoolItem">
  26.                 <div class="shcoolItemWaper"></div>
  27.             </div>
  28.             <div class="shcoolItem">
  29.                 <div class="shcoolItemWaper"></div>
  30.             </div>
  31.             <div class="shcoolItem">
  32.                 <div class="shcoolItemWaper"></div>
  33.             </div>
  34.             <div class="shcoolItem">
  35.                 <div class="shcoolItemWaper"></div>
  36.             </div>
  37.             <div class="shcoolItem">
  38.                 <div class="shcoolItemWaper"></div>
  39.             </div>
  40.         </div>
  41.     </div>
  43. </body>
  45. </html>
  47. <style>
  48.     body {
  49.         padding: 0;
  50.         margin: 0;
  51.     }
  53.     .container {
  54.         width: 700px;
  55.         margin: 20px auto;
  56.         border: 2px solid #acbdff;
  57.     }
  59.     .app-container {
  60.         display: flex;
  61.         flex-wrap: wrap;
  62.         margin-left: -20px;
  63.     }
  65.     .shcoolItem {
  66.         /* 如果一行不是显示固定的个数，这里宽度不写死，针对不同的屏幕下在去写宽度就行了 */
  67.         /* width: 20%; */
  68.         margin-top: 10px;
  69.         margin-bottom: 20px;
  70.         height: 100px;
  71.     }
  73.     .shcoolItemWaper {
  74.         /* 要设置这种间距要设置到flex子元素的里边的元素，不能直接设置到flex子元素里边，
  75.     因为如果子元素算上了间距，就不能控制均分了 */
  76.         margin-left: 20px;
  77.         background: #ffabcd;
  78.         height: 100px;
  79.     }
  81.     /* 小屏下一行显示5个 */
  82.     @media screen and (min-width:100px) {
  83.         .shcoolItem {
  84.             width: 20%;
  85.         }
  86.     }
  88.     /* 中屏一行显示6个 写到下面会覆盖掉上面的样式 */
  89.     @media screen and (min-width:1430px) {
  90.         .shcoolItem {
  91.             width: 16.66%;
  92.         }
  93.     }
  95.     /* 大屏一行显示7个。写到下面会覆盖掉上面的样式 */
  96.     @media screen and (min-width:1799px) {
  97.         .shcoolItem {
  98.             width: 14.2857%;
  99.         }
  100.     }
  102.     /* 超大屏一行显示8个。写到下面会覆盖掉上面的样式 */
  103.     @media screen and (min-width:1899px) {
  104.         .shcoolItem {
  105.             width: 12.5%;
  106.         }
  107.     }
  108. </style>

小屏下一行显示5个：

随便改一下宽度，默认一下大一点的分辨率一行显示6个的效果：

最开始贴的效果图，vue中的写法

最开始贴的效果图是在vue中的实现的，其实样式写法也是一样的，只是里边flex子元素里边的元素信息多一点，包含图片，描述等，贴一下大致代码

  1. <template>
  2.   <lab-nav class="course-resources">
  3.     <div class="course-box">
  4.       <div v-for="(item, index) in courseData" :key="index" class="course-box-item" @click="goCourseDetails(item)">
  5.         <div class="course-box-item-waper">
  6.           <div class="img-waper">
  7.             <img :src="'/oss/api/ImageViewer/' + item.pic + '.jpg?percent=0.6&quality=80&od=true'">
  8.           </div>
  9.           <div class="title courseName">{{ item.courseName }}</div>
  10.           <div class="process-bar">
  11.             <el-progress :stroke-width="10" :percentage="Number((item.process * 100).toFixed(2))" />
  12.           </div>
  13.         </div>
  14.       </div>
  15.     </div>
  16.   </lab-nav>
  17. </template>
  19. <script>
  20. import LabNav from './components/Nav/nav.vue'
  21. import subsys_lab from '../../services/subsys_lab.js'
  22. export default {
  23.   components: {
  24.     LabNav
  25.   },
  26.   data() {
  27.     return {
  28.       loadCourseParam: {
  29.         PageIndex: 1,
  30.         PageSize: 10000,
  31.         KeyWord: '',
  32.         mjdid: this.$route.params.type
  33.       },
  34.       courseData: []
  35.     }
  36.   },
  37.   watch: {
  38.     '$route': 'loadCourseData'
  39.   },
  40.   mounted() {
  41.     this.loadCourseData()
  42.   },
  43.   methods: {
  44.   }
  45. }
  46. </script>
  49. <style scoped="scoped" lang="scss">
  50. .course-resources {
  52.   .course-box {
  53.     display: flex;
  54.     flex-wrap: wrap;
  55.     margin-left: -20px;
  57.     .course-box-item {
  58.       // 宽度不写死，针对不同的屏幕下在去写宽度
  59.       //width: 20%;
  60.       min-width: 160px;
  62.       .course-box-item-waper:hover {
  63.         box-shadow: 0px 0px 8px 0px #d3d3d3;
  64.         cursor: pointer;
  66.         // 图片手指上去放大
  67.         img {
  68.           object-fit: cover;
  69.           -webkit-transition: all .2s;
  70.           transition: all .2s;
  71.           -webkit-transform: scale(1.4);
  72.           transform: scale(1.4);
  73.         }
  74.       }
  76.       .course-box-item-waper {
  77.         background-color: #fff;
  78.         padding-bottom: 10px;
  79.         margin-left: 20px;
  80.         margin-bottom: 20px;
  82.         .img-waper {
  83.           overflow: hidden;
  84.         }
  86.         img {
  87.           width: 100%;
  88.           height: 160px;
  89.           height: auto;
  90.         }
  92.         .title {
  93.           font-size: 13px;
  94.           font-family: Microsoft YaHei;
  95.           font-weight: 400;
  96.           color: #393939;
  97.           padding: 5px;
  98.         }
  100.         .process-bar {
  101.           padding: 5px;
  102.         }
  103.       }
  104.     }
  106.     // 小屏下一行显示5个
  107.     @media screen and (min-width:100px) {
  108.       .course-box-item {
  109.         width: 20%;
  110.       }
  111.     }
  113.     // 中屏一行显示6个 写到下面会覆盖掉上面的样式
  114.     @media screen and (min-width:1430px) {
  115.       .course-box-item {
  116.         width: 16.66%;
  117.       }
  118.     }
  120.     // 大屏一行显示7个。写到下面会覆盖掉上面的样式
  121.     @media screen and (min-width:1799px) {
  122.       .course-box-item {
  123.         width: 14.2857%;
  124.       }
  125.     }
  127.     // 超大屏一行显示8个。写到下面会覆盖掉上面的样式
  128.     @media screen and (min-width:1899px) {
  129.       .course-box-item {
  130.         width: 12.5%;
  131.       }
  132.     }
  133.   }
  135.   // 下面的文字宽度超过了出现省略号
  136.   .courseName {
  137.     overflow: hidden;
  138.     text-overflow: ellipsis;
  139.     white-space: nowrap;
  140.   }
  141. }
  142. </style>

备注,一行固定显示几个等更简单的写法

上面的实现方法只是一种实现方法而已，在很多情况下其实可以有更简单的实现，比如如果一行固定显示4个这种，布局就直接写两级就行了，不用子元素里边在去增加元素来控制。贴一下其他flex布局的应用技巧。

如果只有一行的显示的话参考这个，写法比较简洁

flex 实现等宽布局且间隔相等的小技巧
https://www.tnblog.net/aojiancc/article/details/7975

如果一行固定显示4个这种，布局就直接写两级就行了

参考这个里边的：flex 实现每行4个，自适应排列
https://tnblog.net/aojiancc2/article/details/7904

flex布局一行显示多个。flex布局固定显示n个，自适应布局

https://www.tnblog.net/aojiancc6/article/details/8094


欢迎加群讨论技术，1群：677373950(满了，可以加，但通过不了)，2群：656732739。有需要软件开发，或者学习软件技术的朋友可以和我联系~(Q:815170684)

评价

css弹性盒子，<font color='#ff5555'>flex</font>布局
css弹性盒子由于版本不同浏览器问题造成了一些不同的写法display:flexbox;在google浏览器中如果使用下面的写法就不行displa...

<font color='#ff5555'>flex</font>布局常见问题
flex布局中内容div自适应高度&lt;divclass=&quot;content&quot;&gt; &lt;divclass=&quot;text-center&quot;style=&quot;...

<font color='#ff5555'>flex</font>好看的相册
先让大家看看效果图吧：需要引入外来插件：https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magni...

一点<font color='#ff5555'>flex</font>布局的运用
水平分割：html:&lt;divclass=&quot;flex-container&quot;&gt; &lt;divclass=&quot;flex-item&quot;&gt;flexitem1&lt;/div...

css div水平居 。文字垂直居中 。<font color='#ff5555'>flex</font>的方式实现div的垂直与水平居中。布局模板
DIV等元素水平居中定宽度+margin:top auto可以让一个块级别元素在外层居中例如这样：效果：可以看到这个div已经居中了但是...

uni-app 基础view，<font color='#ff5555'>flex</font>布局使用
代码如下： &lt;template&gt; &lt;view &gt; &lt;view style=&quot;display: flex;flex-direction:row-reve...

<font color='#ff5555'>flex</font>布局多行自适应间隔
//父盒子，设置为： .templateItem { width: 100%; text-align: center; display: flex; align-content: fl...

css实现左边div固定宽度，右边div自适应撑满剩下的宽度。左边定宽，左边固定，右边自适应。<font color='#ff5555'>flex</font> 占剩下的宽度
这是一道面试题，你有多少种办法呢？这里我们假设左边名为 left，宽度为 200 px，右边名为 right。即默认 .left { widt...

<font color='#ff5555'>flex</font>子元素靠右。<font color='#ff5555'>flex</font>让某个子元素靠右或靠左显示
以下以块元素的Flex布局为示例：只需要两句代码，轻松搞定！ 代码1：在父元素里面加入以下代码：（父盒子加了display: fle...

<font color='#ff5555'>flex</font>平分宽度。<font color='#ff5555'>flex</font>宽度自适应，均分宽度
html: &lt;div class=&quot;parent&quot;&gt; &lt;div class=&quot;item&quot;&gt; 测试1 &lt;/div&g...

vue布局模板，前端布局模板，<font color='#ff5555'>flex</font>布局应用
设计图效果： 代码： &lt;!-- 学习活跃度 --&gt; &lt;template&gt; &lt;div class=&quot;learnActivityContainer&q...

<font color='#ff5555'>flex</font>布局一行显示多个。<font color='#ff5555'>flex</font>布局固定显示n个，自适应布局
在前端开发的时候，对页面布局的时候，经常遇到固定的一行显示多个，这个经常遇到，所以我想做个记录，等到下次遇到的时候...

<font color='#ff5555'>flex</font> <font color='#ff5555'>flex</font>-gorw不等分的问题
flex flex-gorw不等分的问题今天在练习flex 栅格布局的时候， 明明设置了项目元素都是flex-gorw:1;但是发现有个地方 ，因为...