最佳CSS方法指定元素间距（可能使用flexbox等）

Question

CSS中指定元素间距的最佳方法是什么？

目前，我使用以下规则在.container元素的每个子元素之间指定0.3rem的间距，在第一个子元素之前和最后一个子元素之后不添加任何空格。

.container > * + * {
  margin-left:0.3rem;
}

有没有更干净/更高效的方法来完成这个任务？我想一个适当的 CSS 属性应该应用于 .container 而不是除了其中一个子元素以外的所有元素，这样会更高效, 但我还没有找到这样的属性。Flexbox 和/或其他更近期的 CSS 改进也可以接受。我在针对最新版本的 Chrome （目前，稳定版是28，开发版是30），但任何浏览器的解决方案都将受到赞赏。谢谢。

- XDR

---

你觉得为什么会使用Flexbox来实现这个目的？ - cimmanon

我认为flexbox对此并没有什么用处，因为我在W3C的flexbox规范中没有找到实现这一点的任何内容。我引用它只是作为我愿意使用的新CSS规范的一个例子。然而，在阅读整个flexbox规范之前，我曾经满怀希望地认为它会有这样一个CSS属性，因为将其包含在CSS中是合理的，并且flexbox比我使用过的其他CSS/HTML布局更加明智。 - XDR

你已经有什么问题了吗？ - cimmanon

目前它可以工作，但如果有更简洁、高效的CSS规则，我更愿意使用它。 - XDR

我也在寻找这个问题的答案。@XDR，你找到解决方案了吗？我喜欢你上面给出的解决方案，但是当我使用flexbox的order属性对.container的子元素进行排序时遇到了问题。我目前正在使用：.flex > *:not(:last-child) { margin-right: 97px; }。如果我找到比已经在这里提出的更好的解决方案，我会发布一个答案。 - mhulse

所以，我被难住了。我一直在努力想弄清楚如何…… - mhulse

Answer 1

是的，你可以尝试这个：

.container > .item:first-child{margin-left:0;}

Full example:

.clearfix{
 display:table;  
}

.clearfix:after, .clearfix:before{  
 clear:both;  
}

.container{
 background-color:gray;  
}

.container > .item{
  width:100px;
  height:100px;
  background-color:lightblue;

  float:left;
  margin-left: 3em;
}

.container > .item:first-child{
 margin-left:0;  
}

<div class="container clearfix">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

你可以使用以下方式实现它：flexbox、inline-block 或 网格系统（float）

- user3197492