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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

Can I use?

› http://caniuse.com/

Less

› http://lesscss.org

Cool Libraries

› Bootstrap from Twitter

› Jetstrap

这是一个创建于 2674 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

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

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

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

元素

Demo

间距

边缘

6 条回复 • 2017-11-27 22:07:27 +08:00

forreal

2017-08-09 13:57:26 +08:00

<space><1><space><2><space><3><space>,这样的结构然后 space 权重等于 1

jmyz0455

2017-08-09 14:20:39 +08:00

@forreal 权重？是 order 吗？设置了 order 然后要配合哪个属性？
能在我的 jsfiddle 代码上演示一下么？

希望楼下有非 flex 的写法。

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

2017-08-10 00:32:05 +08:00

不好意思，我在上面写的非 flex 方法是错的。

forreal

2017-08-14 10:17:06 +08:00

@jmyz0455 https://jsfiddle.net/qp0n31sr/

wwwwzf

2017-11-27 22:07:27 +08:00

用 flex 弹性布局就可以了
这有完整的手册：
http://code.z01.com/v4/layout/grid.html

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

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