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

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

From: Stephen Greig <steve.greig1@gmail.com>
Date: Fri, 5 Apr 2013 00:05:59 +1300
Message-ID: <CACycH4M3CZqhTLf-YynQVNq6gGSpwLdY9X-M1Gj3-FUz-gZ43w@mail.gmail.com>
To: soenke.sothmann@oio.de
Cc: www-style@w3.org
Hi Soenke,

To understand why this is happening, consider that your three rows are each
600px wide (for example).
The first two rows include margins totalling 30px. This leaves 570px to
distribute to the four flex items.
The third row includes margins totalling only 20px. So this leaves 580px to
distribute to the four flex items.
This means that a flex-grow value of 1 is 142.5px for the first two rows
(570px/4) and 145px (580px/4) for the third row.

Hopefully that makes sense (remember, 600px is an estimate width of the
rows for this example).

Somebody please correct me if I am wrong.


On 16 March 2013 03:10, Sönke Sothmann <soenke.sothmann@oio.de> wrote:

> Hello everyone,
> I have a question concerning the width computation of flex items with
> margin.
> What I am trying to do is a grid using flexbox.
> I want to put (e.g.) 4 divs inside a flex container, where each flex item
> consumes equal space and have a margin in between.
> I want to be able to span elements over two "cells".
> The grid and the grid items should grow/shrink with the size of the
> container element.
> It looks like this could be easily done with flexbox.
> Unfortunately, I can't get it to work when I use margins.
> I created a JSFiddle to illustrate the problem:
> http://jsfiddle.net/MWygB/
> The first row is a "reference" row build without flexbox using floats...
> The second row is using flexbox with 4 items, each flex:1.
> The third row is using flexbox with 3 items, where the first item is
> flex:2.
> The problem is in the third row - I was expecting the first item to have
> the same width as the first two items in the second row.
> Is this a browser bug, a gap in the specification, is this not possible
> with flexbox or am I simply doing something wrong?
> Thanks in advance!
> Regards
> Soenke
> --
> OIO - Orientation in Objects GmbH
> Weinheimer Straße 68
> 68309 Mannheim
> Telefon: +49 621 71839-0
> Telefax: +49 621 71839-50
> E-Mail: soenke.sothmann@oio.de
> Internet: http://www.oio.de
> Amtsgericht Mannheim
> HRB 38348
> Geschäftsführer: Tobias Kieninger, Dirk M. Sohn
Received on Friday, 5 April 2013 09:01:27 UTC

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:08:28 UTC