首页
视频
资源
登录
转
flex布局一行显示多个。flex布局固定显示n个,自适应布局
3595
人阅读
2023/4/20 21:48
总访问:
337268
评论:
0
收藏:
0
手机
分类:
前端
在前端开发的时候,对页面布局的时候,经常遇到固定的一行显示多个,这个经常遇到,所以我想做个记录,等到下次遇到的时候,可以直接拿来使用。本篇博客会持续更新 ####(1)flex布局之一行显示4个,如果多于4个,自动换行,代码如下 ``` <div style="display: flex; justify-content: space-between; flex-wrap: wrap; "> <div class="item" style="background-color: aliceblue;"></div> <div class="item" style="background-color: antiquewhite;"></div> <div class="item" style="background-color: aqua;"></div> <div class="item" style="background-color: black;"></div> <div class="item" style="background-color: blueviolet;"></div> <div class="item" style="background-color: chartreuse;"></div> <div class="item" style="background-color: crimson;"></div> </div> <style> .item{ color: black; flex: 0 0 24%; height: 30px; text-align:center; line-height:30px; background-color: white; /* 边距懒得算,css函数代替 */ margin-right: calc(4% / 3); margin-bottom: calc(4% / 3); } /* 去除每行尾的多余边距 */ .item:nth-child(4n){ margin-right: 0; } /* 使最后一个元素的边距填满剩余空间 */ .item:last-child{ margin-right: auto; } </style> ``` 父盒子: ``` style="display: flex; justify-content: space-between; flex-wrap: wrap; " ``` 子盒子: ``` .item{ color: black; flex: 0 0 24%; height: 30px; text-align:center; line-height:30px; background-color: white; /* 边距懒得算,css函数代替 */ margin-right: calc(4% / 3); margin-bottom: calc(4% / 3); } /* 去除每行尾的多余边距 */ .item:nth-child(4n){ margin-right: 0; } /* 使最后一个元素的边距填满剩余空间 */ .item:last-child{ margin-right: auto; } ``` 原文:https://blog.csdn.net/m0_52518047/article/details/120676282
👈{{preArticle.title}}
👉{{nextArticle.title}}
评价
{{titleitem}}
{{titleitem}}
{{item.content}}
{{titleitem}}
{{titleitem}}
{{item.content}}
小见
吃亏决不亏,惜福才有福
博主信息
排名
6
文章
6
粉丝
16
评论
8
文章类别
云服务
10篇
计算机基础
2篇
NET
5篇
.NET
7篇
后端
4篇
前端
24篇
EF
4篇
随笔
5篇
数据库
1篇
.net core
3篇
linux
2篇
微服务
1篇
移动开发
1篇
docker
1篇
最新文章
最新评价
{{item.articleTitle}}
{{item.blogName}}
:
{{item.content}}
关于我们
ICP备案 :
渝ICP备18016597号-1
网站信息:
2018-2024
TNBLOG.NET
技术交流:
群号656732739
联系我们:
contact@tnblog.net
欢迎加群
欢迎加群交流技术