我遇到了一个我无法弄清楚的flexbox +保证金问题。我假设它是一个弹性怪癖，但我想看看是否有其他人注意到这一点以及是否存在任何解决方案。
在下面的CodePen中，您会看到我将一行存储桶设置为flex: 1;，其中包含margin-left: 20px;。
下面是一个内容区域，其中包含flex: 2;和flex: 1;且等于margin-left: 20px;的内容。
两个区域都有一个容器，可以将它们拉向20px以抵消第一个边距。
正如您将看到的那样 - 两个1/3的div不与1 2 / 3rds div对齐。如果你移除边距，它们都会完美地排列，但边距似乎会稍微偏离它。
如果我希望这些排队，我是否必须找到非保证金解决方案？
编辑：这是我所指的特定区域，您可以看到错位：http://cl.ly/image/0z1z2j141V2X/Image%202014-12-19%20at%205.37.07%20PM.png
答案 0 :(得分：1)
边缘是这里的问题，分别是。你将这些边缘放在盒子之间的“排水沟” - 因为两倍于（1200px - 20px - 20px）的1/3当然与（1200px - 20px）的2/3不相同。
我能够自发地想到解决这个问题的唯一方法是使用百分比边际值，并使用相应百分比来表示框的flex属性。
取消负边距，在两边之间使用1％的边距，并消除最后一个元素的第一个和右边距的左边距，并flex: 32.667%（1/3 of 100）存储区的边距为％-2％）和下面的2/3和1/3元素的flex:66% / flex:32%（100％-1％的2/3和1/3），给你这个：http://codepen.io/CBroe/pen/YPWOJG
