html - css:自动居中内部元素(带自动边距)

Question

我有这样的代码:

<div class="first">
  <img class="inner n1">
  <img class="inner n2">
  <img class="inner n3">
</div>

所以它看起来像:

我可以自动拉伸(stretch) margin 吗:

所以第一个元素总是在左边，second+n 总是在中间，最后一个在右边？ (可能有 2...10 个元素，而不仅仅是 3 个)

https://jsfiddle.net/9bbxL8w8/

Answer 1

您可以使用 flex-box 来做到这一点。

.first{
  width: 500px;
  height: 100px;
  background: red;
  display: flex;
  justify-content: space-between;
}

https://jsfiddle.net/9bbxL8w8/1/

不过要注意支持的浏览器。 http://caniuse.com/#feat=flexbox