W3C home > Mailing lists > Public > www-style@w3.org > April 2013

Re: [css-flexbox] Width computation for flex items with margin

From: Daniel Holbert <dholbert@mozilla.com>
Date: Thu, 04 Apr 2013 12:37:05 -0700
Message-ID: <515DD661.5060604@mozilla.com>
To: "Tab Atkins Jr." <jackalmage@gmail.com>, soenke.sothmann@oio.de
CC: www-style list <www-style@w3.org>
On 04/04/2013 08:56 AM, Tab Atkins Jr. wrote:
> To fix this, you need to make the big item count that missing 10px.
> This is pretty easy - just change its "flex: 2;" to "flex: 2 10px;".

(Actually, it should be "flex 2: 12px".  In addition to the 10px of
"missing margin", we have to compensate for 2px of "missing border" in
that row as well.  We've got 1 fewer flex item, so (as with the margins)
we're not setting aside flex-container-space for that item's 1px
border-left + 1px border-right.)

Here's a variant of your fiddle, with that fixed, to bring the final row
into alignment:
 http://jsfiddle.net/MWygB/1/

~Daniel
Received on Thursday, 4 April 2013 19:37:36 UTC

This archive was generated by hypermail 2.3.1 : Thursday, 4 April 2013 19:37:37 UTC