想问下这种布局怎么实现！

2018-09-13 11:25:16 +08:00
 qwertyzzz

外面一个大框 里面各个小框是正方形 大框宽度是手机宽度 所以不同手机可能不一样 里面小框都用一个数组循环出来 如何做到控制间距。还要平分。。

3180 次点击
所在节点    程序员
14 条回复
Egg
2018-09-13 11:28:35 +08:00
https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex
xiaochou
2018-09-13 11:29:04 +08:00
flexbox 布局
wozhizui
2018-09-13 11:29:12 +08:00
flex
libertyWhitney
2018-09-13 11:29:39 +08:00
CSS3 的 Grid 布局
0nlyy0u
2018-09-13 11:29:40 +08:00
uicollectionview
janus77
2018-09-13 11:33:48 +08:00
你说的是 app 还是网页，如果是 app 是什么系统
jokercoplay
2018-09-13 12:40:29 +08:00
flex
qwertyzzz
2018-09-13 13:06:54 +08:00
@jokercoplay 容器和项目需要怎么设置呢 间距不太好弄呀
@janus77 小程序
yggd
2018-09-13 13:14:04 +08:00
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
qiayue
2018-09-13 13:37:08 +08:00
用 flex 最简单
也可以用 box-sizing: border-box，更容易理解，缺点是需要 2 层盒子
每一层盒子我都加了不同背景色，根据背景色就知道原理了
laxenade
2018-09-13 15:03:29 +08:00
Flex space – around
fengmumu
2018-09-13 15:36:22 +08:00
浮动不好吗
guomuzz
2018-09-13 17:51:44 +08:00
@fengmumu flex 方便啊
xrr2016
2018-09-14 08:11:55 +08:00
grid 很方便

这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/488863

V2EX 是创意工作者们的社区，是一个分享自己正在做的有趣事物、交流想法，可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX