首页
视频
资源
登录
风清月
愿你出走半生，归来仍是少年
博主信息
排名
6
文章
6
粉丝
16
评论
8
文章类别
mvc
9篇
c#面试题
1篇
爬虫
1篇
Redis
1篇
NET
37篇
JS相关
2篇
Oracle
1篇
随笔
30篇
学点小英语
9篇
Vue.js
3篇
jquery
2篇
Sqlerver
7篇
前端
53篇
ps
1篇
net core
39篇
更多
架构
9篇
rpc
1篇
EF
6篇
mui
8篇
微服务
8篇
微信
1篇
.net
5篇
svn
1篇
人工智能
6篇
nginx
4篇
docker
14篇
git
4篇
c++
3篇
linux
11篇
uniapp
7篇
k8s
23篇
python
3篇
最新文章
最新评价
{{item.articleTitle}}
{{item.blogName}}
:
{{item.content}}
关于我们
ICP备案 ：
渝ICP备18016597号-1
网站信息：
2018-2024
TNBLOG.NET
技术交流：
群号656732739
联系我们：
contact@tnblog.net
欢迎加群
欢迎加群交流技术
转
flex实现等宽布局且间隔相等的小技巧。使用flex 布局让子元素宽度均分且左右间距相等。flex宽度自适应，均分宽度，而且有一样的间距
6658
人阅读
2023/2/7 23:12
总访问：
1629766
评论：
0
收藏：
1
手机
分类:
前端
**html:** ``` <section class="father"> <div class="item item-1"></div> <div class="item item-2"></div> <div class="item item-3"></div> </section> ``` **css:** ``` .father { display: flex; padding : 20px; width: 300px; height : 200px; border : 5px solid #000; } .item { flex : 1; } .item-1 { background: red; } .item-2 { background: green; } .item-3 { background: blue; } /*重点代码*/ .father .item + .item { margin-left : 20px; } ``` **这里父容器设置了padding值，会影响父容器的宽高，如果不想影响可以设置** ``` box-sizing: border-box; ``` 原文地址：https://blog.csdn.net/sinat_33255495/article/details/118324934
欢迎加群讨论技术，1群：677373950(满了，可以加，但通过不了)，2群：656732739
👈{{preArticle.title}}
👉{{nextArticle.title}}
评价
{{titleitem}}
{{titleitem}}
{{item.content}}
{{titleitem}}
{{titleitem}}
{{item.content}}
分类:
前端
分类:
前端