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

[jmyz0455]

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

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

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

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

[forreal]

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

[jmyz0455]

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

希望楼下有非 flex 的写法。

[longxi]

flex：也可以用 before 和 after 两个伪元素搭配 space-between，效果相同。来自： http://imweb.io/topic/5751983c3eef750438d5cb82
非 flex：在首或尾加一个空 li 标签，然后给 li 标签设置 margin-right: auto （ li 加在首）或者 margin-left: auto （ li 加在尾）

[longxi]

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

[forreal]

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

[wwwwzf]

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