V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
• 请不要在回答技术问题时复制粘贴 AI 生成的内容
qwertyzzz
V2EX  ›  程序员

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

  •  
  •   qwertyzzz ·
    123 · 2018-09-13 11:25:16 +08:00 · 3173 次点击
    这是一个创建于 2288 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    14 条回复    2018-09-14 08:11:55 +08:00
    Egg
        1
    Egg  
       2018-09-13 11:28:35 +08:00
    xiaochou
        2
    xiaochou  
       2018-09-13 11:29:04 +08:00
    flexbox 布局
    wozhizui
        3
    wozhizui  
       2018-09-13 11:29:12 +08:00
    flex
    libertyWhitney
        4
    libertyWhitney  
       2018-09-13 11:29:39 +08:00
    CSS3 的 Grid 布局
    0nlyy0u
        5
    0nlyy0u  
       2018-09-13 11:29:40 +08:00
    uicollectionview
    janus77
        6
    janus77  
       2018-09-13 11:33:48 +08:00 via Android
    你说的是 app 还是网页,如果是 app 是什么系统
    jokercoplay
        7
    jokercoplay  
       2018-09-13 12:40:29 +08:00
    flex
    qwertyzzz
        8
    qwertyzzz  
    OP
       2018-09-13 13:06:54 +08:00
    @jokercoplay 容器和项目需要怎么设置呢 间距不太好弄呀
    @janus77 小程序
    yggd
        9
    yggd  
       2018-09-13 13:14:04 +08:00
    qiayue
        10
    qiayue  
       2018-09-13 13:37:08 +08:00   ❤️ 1
    用 flex 最简单
    也可以用 box-sizing: border-box,更容易理解,缺点是需要 2 层盒子
    每一层盒子我都加了不同背景色,根据背景色就知道原理了
    laxenade
        11
    laxenade  
       2018-09-13 15:03:29 +08:00 via Android
    Flex space – around
    fengmumu
        12
    fengmumu  
       2018-09-13 15:36:22 +08:00
    浮动不好吗
    guomuzz
        13
    guomuzz  
       2018-09-13 17:51:44 +08:00
    @fengmumu flex 方便啊
    xrr2016
        14
    xrr2016  
       2018-09-14 08:11:55 +08:00
    grid 很方便
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5448 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 33ms · UTC 08:39 · PVG 16:39 · LAX 00:39 · JFK 03:39
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.