我遇到了一个我不太明白的 flexbox + margin 问题。我假设这是一个 flex-quirk，但我想我会看看是否有其他人注意到这一点以及是否存在任何解决方案。
在下面的 CodePen 中，您会看到我有一排桶设置为 flex: 1;用margin-left: 20px;在他们身上。
下面是一个带有 flex: 2; 的内容区域和 flex: 1;等于margin-left: 20px;就像水桶一样。
这两个区域都有一个容器，可以将它们向左拉 20 像素以抵消第一个边距。
如您所见 - 两个 1/3 的 div 与 1 2/3 的 div 不对齐。如果您移除边距，它们都会完美对齐，但边距似乎会稍微偏离。
如果我想让它们排成一行，我是否必须找到一个非 margin 解决方案？
编辑:这是我特别提到的区域，您可以在其中看到未对齐的区域:http://cl.ly/image/0z1z2j141V2X/Image%202014-12-19%20at%205.37.07%20PM.png
最佳答案
页边距是这里的问题，resp。您通过这些边距放置在框之间的“间距”——因为 (1200px - 20px - 20px) 的 1/3 的两倍当然与 (1200px - 20px) 的 2/3 不同。
我能自发想到解决这个问题的唯一方法是使用百分比边距值，并根据百分比为框的 flex 属性使用。
取消负边距，在中间每边使用 1% 的边距，并消除第一个元素的左边距和最后一个元素的右边距，以及 flex: 32.667% (边距的 100%-2% 的 1/3)用于桶和 flex:66%/flex:32% 用于 2/3 和 1/3下面的元素(100%-1% 的 2/3 和 1/3)，给你这个:http://codepen.io/CBroe/pen/YPWOJG
关于html - 具有边距对齐问题的 Flexbox，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27574541/