具有边距对齐问题的 Flexbox答案

【问题标题】：Flexbox with margins alignment issue具有边距对齐问题的 Flexbox
【发布时间】：2015-02-18 21:22:47
【问题描述】：

我遇到了一个我无法弄清楚的 flexbox + 边距问题。我假设这是一个灵活的怪癖，但我想看看是否有其他人注意到这一点以及是否存在任何解决方案。

在下面的 CodePen 中，您会看到我有一排设置为 flex: 1; 的桶，上面有一个 margin-left: 20px;。

下面是一个内容区域，其中包含 flex: 2; 和 flex: 1; 以及等于 margin-left: 20px; 的存储桶。

两个区域都有一个容器，可以将它们向左拉 20px 以抵消第一个边距。

CodePen Example Here

如您所见 - 两个 1/3 的 div 不与 1 2/3 的 div 对齐。如果您删除边距，它们都会完美排列，但边距似乎会稍微偏离。

如果我想让这些排成一行，我是否必须找到一个非保证金的解决方案？

编辑：这是我专门指的区域，您可以在其中看到错位：http://cl.ly/image/0z1z2j141V2X/Image%202014-12-19%20at%205.37.07%20PM.png

【问题讨论】：

您的 3 个buckets 每个都有 20px 的边距。你的content-left 和content-right 都有 20px 的边距，但只有 2 个。

标签： html css flexbox

【解决方案1】：

边距是这里的问题，分别。您在框之间的边距放置的“排水沟”——因为 (1200px - 20px - 20px) 的 1/3 的两倍当然与 (1200px - 20px) 的 2/3 不同。

我能自发想到解决这个问题的唯一方法是使用百分比边距值，并为框的flex 属性使用相应的百分比。

取消负边距，在中间使用每边 1% 的边距，并消除第一个元素的左边距和最后一个元素的右边距，以及 flex: 32.667% (1/3 of 100%- 2% 的边距）和flex:66%/flex:32% 下面的 2/3 和 1/3 元素（100%-1% 的 2/3 和 1/3），给你这个：@987654321 @

【讨论】：

这基本上就是我的后备系统正在使用的 - 使用百分比作为 flex 值是否会在某种程度上消除 flex 的微妙之处？就像这样，从本质上讲，这难道不是一种流畅的布局吗？
有点无视那条评论——你仍然可以享受 flex 布局的好处，只是在尺寸部门需要更多的手动操作。我会将此视为一个解决方案 - 看起来不错，谢谢！