带有边距对齐问题的Flexbox

Question

I'm running into a flexbox + margin issue that I can't quite figure out. I'm assuming it's a flex-quirk but figured I'd see if anyone else has noticed this and if any solutions exist.

In the CodePen below you'll see I have a row of buckets set to flex: 1; with a margin-left: 20px; on them.

Below that is a content area with a flex: 2; and flex: 1; and equal margin-left: 20px; 's as the buckets.

Both areas have a container that pulls them left 20px to offset the first margin.

CodePen Example Here

As you'll see - the two 1/3rd's divs do not line up with the 1 2/3rds div. If you remove the margins, they all line up perfectly but margins seems to throw it off every so slightly.

If I want these to line up, will I have to find a non-margin solution?

Edit: This is the area I'm referring to specifically where you can see the mis-alignment: http://cl.ly/image/0z1z2j141V2X/Image%202014-12-19%20at%205.37.07%20PM.png

Answer 1

The margins are the issue here, resp. the “gutters” you're placing between the boxes by those margins – because two times 1/3 of (1200px - 20px - 20px) is of course not the same as 2/3 of (1200px - 20px).

The only way I can think of spontaneously to solve this, is to use a percentage margin value instead, and use according percentages for the flex property of the boxes as well.

Doing away with the negative margins, using a margin of 1% each side in between, and eliminating the left margin of the first and the right margin of the last element, and flex: 32.667% (1/3 of 100%-2% for the margins) for the buckets and flex:66% / flex:32% for the 2/3 and 1/3 elements below (2/3 and 1/3 of 100%-1%), gives you this: http://codepen.io/CBroe/pen/YPWOJG