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

flex 每行3个。flex一行显示3个。flex 每行显示4个自适应排列。flex每行固定几个布局。css 格子栏效果，css实现框框效果。模板。小屏下一行显示4个，大屏下一行显示5个

9681人阅读 2019/11/16 21:31 总访问：5182873 评论：0 收藏：0 手机
分类: 前端

效果如下，每行显示3个自适应排列

其实也很简单，只需要设置父元素flex布局，然后设置一下换行排列，flex-wrap: wrap。然后子元素设置一下宽度占1/3就可以了。其他什么间距这些微调就行了。这是这种方式主要适用于里边只是文字内容的形式，显示的时候能看到的宽度就是文字的长度，如果要显示固定的那种一块一块的效果就不是太适用了，这个下面有讲其他方法实现。


使用grid布局可以更简单更通用，可以参考:https://www.tnblog.net/aojiancc2/article/details/8231

代码如下

html代码：

  1. <div class="labroom-level">
  2.     <!-- 优良中差分别为excellent，good ，middle，poor -->
  3.     <div class="labroom-level-item labroom-level-excellent">
  4.         <div class="labroom-level-title">
  5.             优
  6.         </div>
  7.         <div class="labroom-level-box">
  8.             <div class="labroom-level-box-course">
  9.                 <span class="course-name">《Photoshop应用设计》</span>
  10.                 <span class="course-completepr">99%</span>
  11.             </div>
  12.             <div class="labroom-level-box-course">
  13.                 <span class="course-name">《Photoshop应用设计》</span>
  14.                 <span class="course-completepr">99%</span>
  15.             </div>
  16.             <div class="labroom-level-box-course">
  17.                 <span class="course-name">《Photoshop应用设计XXXX》</span>
  18.                 <span class="course-completepr">99%</span>
  19.             </div>
  20.             <div class="labroom-level-box-course">
  21.                 <span class="course-name">《Photoshop应用设计》</span>
  22.                 <span class="course-completepr">99%</span>
  23.             </div>
  24.             <div class="labroom-level-box-course">
  25.                 <span class="course-name">《Photoshop应用设计MMM》</span>
  26.                 <span class="course-completepr">99%</span>
  27.             </div>
  28.         </div>
  29.     </div>
  30.     <div class="labroom-level-item labroom-level-middle">
  31.         <div class="labroom-level-title">
  32.             及格
  33.         </div>
  34.         <div class="labroom-level-box">
  35.             <div class="labroom-level-box-course">
  36.                 <span class="course-name">《Photoshop应用设计》</span>
  37.                 <span class="course-completepr">99%</span>
  38.             </div>
  39.             <div class="labroom-level-box-course">
  40.                 <span class="course-name">《Photoshop应用设计》</span>
  41.                 <span class="course-completepr">99%</span>
  42.             </div>
  43.             <div class="labroom-level-box-course">
  44.                 <span class="course-name">《Photoshop应用设计XXXX》</span>
  45.                 <span class="course-completepr">99%</span>
  46.             </div>
  47.             <div class="labroom-level-box-course">
  48.                 <span class="course-name">《Photoshop应用设计》</span>
  49.                 <span class="course-completepr">99%</span>
  50.             </div>
  51.             <div class="labroom-level-box-course">
  52.                 <span class="course-name">《Photoshop应用设计MMM》</span>
  53.                 <span class="course-completepr">99%</span>
  54.             </div>
  55.         </div>
  56.     </div>
  57.     <div class="labroom-level-item labroom-level-poor">
  58.         <div class="labroom-level-title">
  59.             差
  60.         </div>
  61.         <div class="labroom-level-box">
  62.             <div class="labroom-level-box-course">
  63.                 <span class="course-name">《Photoshop应用设计》</span>
  64.                 <span class="course-completepr">99%</span>
  65.             </div>
  66.             <div class="labroom-level-box-course">
  67.                 <span class="course-name">《Photoshop应用设计》</span>
  68.                 <span class="course-completepr">99%</span>
  69.             </div>
  70.             <div class="labroom-level-box-course">
  71.                 <span class="course-name">《Photoshop应用设计XXXX》</span>
  72.                 <span class="course-completepr">99%</span>
  73.             </div>
  74.             <div class="labroom-level-box-course">
  75.                 <span class="course-name">《Photoshop应用设计》</span>
  76.                 <span class="course-completepr">99%</span>
  77.             </div>
  78.             <div class="labroom-level-box-course">
  79.                 <span class="course-name">《Photoshop应用设计MMM》</span>
  80.                 <span class="course-completepr">99%</span>
  81.             </div>
  82.         </div>
  83.     </div>
  84. </div>

样式：样式用了lang=”scss”，可以写层级

  1. .labroom-level-item {
  3.     margin-top: 20px;
  5.     .labroom-level-title {
  6.         background: #F5F9FF;
  7.         height: 45px;
  8.         line-height: 45px;
  9.         padding: 0 20px;
  11.         font-size: 16px;
  12.         font-family: MicrosoftYaHei-, MicrosoftYaHei;
  13.         font-weight: normal;
  14.     }
  16.     .labroom-level-box {
  17.         border: 1px solid #EAEEF0;
  18.         border-top: none;
  19.         padding-top: 10px;
  20.         padding-bottom: 20px;
  21.         min-height: 20px;
  22.         display: flex;
  23.         flex-wrap: wrap;
  24.         padding-left: 13px;
  25.     }
  27.     .labroom-level-box-course {
  29.         // 直接让宽度为33.33%就可以每行显示3快了
  30.         width: 33.33%;
  31.         margin-top: 10px;
  33.         .course-name {
  34.             color: #333339;
  35.             font-size: 14px;
  36.             font-family: MicrosoftYaHei-, MicrosoftYaHei;
  37.         }
  38.     }
  40. }
  42. // 优秀时候的字体颜色与字体颜色
  43. .labroom-level-excellent {
  44.     color: #3E91F7;
  46.     .labroom-level-title {
  47.         background: #F5F9FF;
  48.     }
  49. }
  51. // 及格时候的字体颜色与背景颜色
  52. .labroom-level-middle {
  53.     color: #F19537;
  55.     .labroom-level-title {
  56.         background: #FFF9F0;
  57.     }
  58. }
  60. // 不及格时候的字体颜色与背景颜色
  61. .labroom-level-poor {
  62.     color: #E57470;
  64.     .labroom-level-title {
  65.         background: #FFF4F4;
  67.     }
  68. }

小屏下一行显示4个，中屏下一行显示5个，大屏下一行显示6个

其实和上面那种类似，在上面的基础上做一个屏幕适配就行了，在多大的分辨率下单独设置一下就行了

  1. // 小屏下一行显示4个
  2. @media screen and (min-width:100px) {
  3.     .menuItem {
  4.         width: 25%;
  5.         margin-bottom: 20px;
  6.     }
  7. }
  9. // 中屏一行显示5个 写到下面会覆盖掉上面的样式
  10. @media screen and (min-width:1366px) {
  11.     .menuItem {
  12.         width: 20%;
  13.         margin-bottom: 20px;
  14.     }
  15. }
  17. // 大屏一行显示6个。写到下面会覆盖掉上面的样式
  18. @media screen and (min-width:1799px) {
  19.     .menuItem {
  20.         width: 16.66%;
  21.         margin-bottom: 20px;
  22.     }
  23. }

贴一下完整一点的代码吧

  1. <template>
  2.     <div class="my-app-container">
  3.         <div class="content">
  4.             <el-card v-if="schoolList.length > 0" class="box-card mymenucard">
  5.                 <div slot="header" class="clearfix">
  6.                     <span>教学看板</span>
  7.                 </div>
  8.                 <div class="menuItemWrap">
  9.                     <div v-for="(item, index) in schoolList" :key="index" class="menuItem"
  10.                         @click="jumpSchool(item.schoolID)">
  11.                         <div class="menuItemImg" />
  12.                         <div class="menuItemDesc">{{ item.schoolName }}</div>
  13.                     </div>
  14.                 </div>
  15.             </el-card>
  16.         </div>
  17.     </div>
  18. </template>
  19. <script>
  21. import { mapGetters } from 'vuex'
  23. export default {
  24.     // 组件名字
  25.     name: 'ApplicationCenter',
  26.     data() {
  27.         return {
  28.             schoolList: [],
  29.             permission_routes_show: []
  30.         }
  31.     },
  32.     mounted() {
  33.         this.getSchoolListByTeacher()
  34.         this.handlerMenus()
  35.     },
  36.     computed: {
  37.         ...mapGetters([
  38.             'permission_routes'
  39.         ])
  40.     },
  41.     // 组件方法
  42.     methods: {
  43.     }
  44. }
  45. </script>
  46. <style scoped="scoped" lang="scss">
  47. .my-app-container {
  49.     padding-left: 20px;
  50.     padding-right: 20px;
  51.     background: #F8F8F8;
  53.     .content {
  54.         // margin-top: 20px;
  56.         .mymenucard {
  57.             margin-top: 20px;
  58.             margin-bottom: 20px;
  59.         }
  61.         .menuItemWrap {
  62.             display: flex;
  63.             flex-wrap: wrap;
  64.             // justify-content: space-between;
  65.         }
  67.         .menuItem {
  68.             font-size: 14px;
  69.             display: flex;
  70.             cursor: pointer;
  71.             // background-color: #ffabcd;
  73.             .menuItemImg {
  74.                 height: 43px;
  75.                 width: 43px;
  76.                 // background-image: url('~@/assets/imgs/applicationCenter/applicationCenter1.png');
  77.                 background-size: cover;
  78.             }
  80.             .menuItemImgBasic {
  81.                 height: 43px;
  82.                 width: 43px;
  83.                 background-size: cover;
  84.             }
  86.             .menuItemDesc {
  87.                 height: 43px;
  88.                 line-height: 43px;
  89.                 margin-left: 9px;
  91.                 overflow: hidden;
  92.                 text-overflow: ellipsis;
  93.                 white-space: nowrap;
  94.             }
  95.         }
  97.         // 没有图标的循环换一下图标
  98.         .menuItem:nth-child(6n-1) {
  99.             .menuItemImg {
  100.                 background-image: url('~@/assets/imgs/applicationCenter/applicationCenter5.png');
  101.             }
  102.         }
  104.         .menuItem:nth-child(6n-2) {
  105.             .menuItemImg {
  106.                 background-image: url('~@/assets/imgs/applicationCenter/applicationCenter4.png');
  107.             }
  108.         }
  110.         .menuItem:nth-child(6n-3) {
  111.             .menuItemImg {
  112.                 background-image: url('~@/assets/imgs/applicationCenter/applicationCenter3.png');
  113.             }
  114.         }
  116.         .menuItem:nth-child(6n-4) {
  117.             .menuItemImg {
  118.                 background-image: url('~@/assets/imgs/applicationCenter/applicationCenter2.png');
  119.             }
  120.         }
  122.         .menuItem:nth-child(6n-5) {
  123.             .menuItemImg {
  124.                 background-image: url('~@/assets/imgs/applicationCenter/applicationCenter1.png');
  125.             }
  126.         }
  128.         .menuItem:nth-child(6n) {
  129.             .menuItemImg {
  130.                 background-image: url('~@/assets/imgs/applicationCenter/applicationCenter6.png');
  131.             }
  132.         }
  134.         // 小屏下一行显示4个
  135.         @media screen and (min-width:100px) {
  136.             .menuItem {
  137.                 width: 25%;
  138.                 margin-bottom: 20px;
  139.             }
  140.         }
  142.         // 中屏一行显示5个 写到下面会覆盖掉上面的样式
  143.         @media screen and (min-width:1500px) {
  144.             .menuItem {
  145.                 width: 20%;
  146.                 margin-bottom: 20px;
  147.             }
  148.         }
  150.         // 大屏一行显示6个。写到下面会覆盖掉上面的样式
  151.         @media screen and (min-width:1799px) {
  152.             .menuItem {
  153.                 width: 16.66%;
  154.                 margin-bottom: 20px;
  155.             }
  156.         }
  158.     }
  159. }
  160. </style>

flex 实现每行4个(带格子方块的)，自适应排列

上面的实现方法一般主要适用里边都是文字的情况，但是我要显示类似这种一块一块的效果,就不太适用了，比如下面的效果

实现如下

  1. <template>
  2.     <div class="app-container">
  3.         <div class="shcoolItem">重庆应用职业技术学院</div>
  4.         <div class="shcoolItem">重庆应用职业技术学院</div>
  5.         <div class="shcoolItem">重庆应用职业技术学院</div>
  6.         <div class="shcoolItem">重庆应用职业技术学院</div>
  7.         <div class="shcoolItem">重庆应用职业技术学院</div>
  8.         <div class="shcoolItem">重庆应用职业技术学院</div>
  9.         <div class="shcoolItem">重庆应用职业技术学院</div>
  10.     </div>
  11. </template>
  13. <script>
  14. export default {
  15.     // 组件名字
  16.     name: 'SchoolChangeDialog',
  17.     // 组件参数
  18.     props: {
  19.         percentage: {
  20.             type: Number,
  21.             default: 0
  22.         },
  23.         title: {
  24.             type: String,
  25.             default: ''
  26.         },
  27.     },
  28.     data() {
  29.         return {
  30.         }
  31.     },
  32.     mounted() {
  33.     },
  34.     // 组件方法
  35.     methods: {
  36.     }
  37. }
  38. </script>
  39. <style scoped="scoped" lang="scss">
  40. .app-container {
  41.     margin-top: 20px;
  42.     margin-bottom: 100px;
  43.     padding-left: 10px;
  44.     padding-right: 10px;
  46.     display: flex;
  47.     flex-wrap: wrap;
  48.     justify-content: space-between; 
  50.     .shcoolItem {
  51.         // width: 240px;
  52.         height: 46px;
  53.         background: rgba(0, 150, 255, 0.15);
  54.         border: 1px solid #0E66A1;
  55.         border-radius: 4px;
  57.         font-size: 16px;
  58.         font-family: Microsoft YaHei;
  59.         font-weight: 400;
  60.         color: #FFFFFF;
  61.         text-align: center;
  62.         line-height: 46px;
  64.         // 这里如果某些情况下有问题，比如百分比不是相对于父级而是整个页面了，可以调整为width:23%试试
  65.         flex: 0 0 23%;
  66.         /* 动态计算间距 */
  67.         margin-right: calc(8% / 3);
  68.         // margin-bottom: calc(5% / 3);
  69.         margin-bottom: 20px
  70.     }
  72.     /* 去除每行尾的多余边距 */
  73.     .shcoolItem:nth-child(4n) {
  74.         margin-right: 0;
  75.     }
  77.     /* 使最后一个元素的边距填满剩余空间 */
  78.     .shcoolItem:last-child {
  79.         margin-right: auto;
  80.     }
  81. }
  82. </style>

父容器主要的样式就是

  1. display: flex;
  2. flex-wrap: wrap;
  3. justify-content: space-between;

这个没什么好说的

子元素主要的样式就是

  1. .shcoolItem {
  2.     flex: 0 0 23%;
  3.     /* 动态计算间距 */
  4.     margin-right: calc(8% / 3);
  5.     // margin-bottom: calc(5% / 3);
  6.     margin-bottom: 20px
  7. }
  9. /* 去除每行尾的多余边距 */
  10. .shcoolItem:nth-child(4n) {
  11.     margin-right: 0;
  12. }
  14. /* 使最后一个元素的边距填满剩余空间 */
  15. .shcoolItem:last-child {
  16.     margin-right: auto;
  17. }

其中的flex: 0 0 23%，表示每个子元素占宽度的23%。

其中的margin-right: calc(8% / 3)，表示每块右边距离是8%除以3。为什么是8%呢，因为每块是23%,4块就是92%,还剩下8%的宽度，让他们之间均分，就是8%/3了，至于为什么不是除以4因为4个元素中间是3块空白。如果每块占用的宽度是24，flex: 0 0 24%，那么间距的计算就不是8%/3，而是4%/3,因为每块占24%,4块就是96%了，就还剩4%来做他们之间的间距了。

其实感觉使用上面文字的那种实现方法也可以
文字的宽度其实不是固定的应该是文字有多宽块块就有多宽，但是为了让一行固定显示几个就固定一下宽度，比如一个块的宽度是25%那么就是一行显示4个，其实宽度固定实现起来还要方便一些，比如下面这种情况一行固定显示4个还要有点间距，我们其实可以这样。
每块的宽度设置成23%,或者是24%都可以，然后在设置一下：

  1. justify-content: space-between

它就会自动分配剩下的空间给每块之间的间隔了，感觉实现起来比刚刚上面提到的方法还简单很多，就设置一下宽度和justify-content即可。

flex 实现每行3个(带格子方块的)，自适应排列


和上面那个实现方法一样，用的时候方便直接复制。

设计图(选中的效果请忽略，主要是每行三个的布局)：

标签：

  1. <view class="completeInfo">
  2.     <view class="completeItem" v-for="(item, index) in 17" :key="index">张三三</view>
  3. </view>

样式：

  1. .completeInfo {
  2.     background-color: #fff;
  3.     display: flex;
  4.     flex-wrap: wrap;
  5.     justify-content: space-between;
  7.     .completeItem {
  8.         flex: 0 0 31%;
  9.         /* 动态计算间距,除以2是因为3个元素中间只有2个缝隙 */
  10.         margin-right: calc(7% / 2);
  11.         margin-bottom: 15rpx;
  12.         height: 65rpx;
  13.         background: #F6F6F6;
  14.         font-size: 26rpx;
  15.         color: #313960;
  16.         text-align: center;
  17.         line-height: 65rpx;
  18.     }
  20.     /* 去除每行尾的多余边距 */
  21.     .completeItem:nth-child(3n) {
  22.         margin-right: 0;
  23.     }
  25.     /* 使最后一个元素的边距填满剩余空间 */
  26.     .completeItem:last-child {
  27.         margin-right: auto;
  28.     }
  29. }

flex 实现图片一行显示4个，自适应排列


和上面那两个实现方法逻辑一样的

效果图：

标签：

  1. <view class="image-content">
  2.     <image class="imgitem" @click="previewImg(0)" mode="scaleToFill"
  3.         src="https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg">
  4.     </image>
  5.     <image class="imgitem" @click="previewImg(1)"
  6.         src="https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg">
  7.     </image>
  8.     <image class="imgitem" @click="previewImg(2)"
  9.         src="https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg">
  10.     </image>
  11.     <image class="imgitem" @click="previewImg(3)"
  12.         src="https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg">
  13.     </image>
  14.     <image class="imgitem" @click="previewImg(4)"
  15.         src="https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg">
  16.     </image>
  17.     <image class="imgitem" @click="previewImg(5)"
  18.         src="https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg">
  19.     </image>
  20. </view>

样式：

  1. .image-content {
  2.     margin-top: 10px;
  3.     display: flex;
  4.     flex-wrap: wrap;
  5.     justify-content: space-between;
  7.     .imgitem {
  8.         flex: 0 0 23%;
  9.         /* 动态计算间距 */
  10.         margin-right: calc(8% / 3);
  11.         margin-bottom: 15rpx;
  12.         height: 200rpx;
  13.         background: #F6F6F6;
  14.         border-radius: 0px 0px 0px 0px;
  15.         opacity: 1;
  16.     }
  18.     /* 去除每行尾的多余边距 */
  19.     .imgitem:nth-child(4n) {
  20.         margin-right: 0;
  21.     }
  23.     /* 使最后一个元素的边距填满剩余空间 */
  24.     .imgitem:last-child {
  25.         margin-right: auto;
  26.     }
  27. }

如果一行显示的数量不固定，控制不同分辨率下显示不同的个数

参考：https://www.tnblog.net/aojiancc2/article/details/8176

其实多列多行的情况，使用grid布局会更好实现一点，grid布局是真正的二维布局


grid布局的使用记录，可参考考:https://www.tnblog.net/aojiancc2/article/details/8231


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

评价

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

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

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

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

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

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

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

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

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

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

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

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

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

<font color='#ff5555'>flex实现5555'>一行显示n5555'>个数量的布局5555'>，不同屏幕宽度下显示不同的数量5555'>，自适应5555'>一行显示的5555'>个数
[TOC]要实现的效果如下: 其实原理也非常简单，父元素主要是主要就是设置一个flex布局，然后flex-wrap设置为需要换行 .app...