V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Can I use?
http://caniuse.com/
Less
http://lesscss.org
Cool Libraries
Bootstrap from Twitter
Jetstrap
jmyz0455
V2EX  ›  CSS

多个 非等宽/非等高 的元素如何做到 水平/垂直 间距均匀地非贴边两端对齐?

  •  
  •   jmyz0455 · 2017-08-09 12:05:38 +08:00 · 3461 次点击
    这是一个创建于 2647 天前的主题,其中的信息可能已经有所发展或是发生改变。

    标题可能说得有点复杂,可以先看看我的 Demo 。 可以看到,有多个大小不一的元素,我想做到以下几点:

    1. 两端对齐并居中;
    2. 第一和最后一个元素不紧贴父元素边缘;
    3. 元素之间和元素到边缘的间距相等;
    

    虽然我的 Demo 完美实现了效果,但其实我是用了一个很新的 justify-content 属性: space-evenly , 连 MDN 的 Browser compatibility 也没来得及更新(显示 Chrome 为 No support 但其实是可以正常渲染的)。

    请问这种效果,还能用别的写法实现吗?

    6 条回复    2017-11-27 22:07:27 +08:00
    forreal
        1
    forreal  
       2017-08-09 13:57:26 +08:00
    <space><1><space><2><space><3><space>,这样的结构然后 space 权重等于 1
    jmyz0455
        2
    jmyz0455  
    OP
       2017-08-09 14:20:39 +08:00
    @forreal 权重?是 order 吗?设置了 order 然后要配合哪个属性?
    能在我的 jsfiddle 代码上演示一下么?

    希望楼下有非 flex 的写法。
    longxi
        3
    longxi  
       2017-08-10 00:25:41 +08:00
    flex:也可以用 before 和 after 两个伪元素搭配 space-between,效果相同。来自: http://imweb.io/topic/5751983c3eef750438d5cb82
    非 flex:在首或尾加一个空 li 标签,然后给 li 标签设置 margin-right: auto ( li 加在首)或者 margin-left: auto ( li 加在尾)
    longxi
        4
    longxi  
       2017-08-10 00:32:05 +08:00
    不好意思,我在上面写的非 flex 方法是错的。
    forreal
        5
    forreal  
       2017-08-14 10:17:06 +08:00
    wwwwzf
        6
    wwwwzf  
       2017-11-27 22:07:27 +08:00
    用 flex 弹性布局就可以了
    这有完整的手册:
    http://code.z01.com/v4/layout/grid.html
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1082 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 19:09 · PVG 03:09 · LAX 11:09 · JFK 14:09
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.