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

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.

Regards,
Stephen


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
>
>
>
>
>
>
>
>