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

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

From: Sönke Sothmann <soenke.sothmann@oio.de>
Date: Fri, 15 Mar 2013 14:10:24 +0000
To: <www-style@w3.org>
Message-ID: <002401ce2186$0af47410$20dd5c30$@sothmann@oio.de>
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:
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!


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 Thursday, 4 April 2013 10:02:07 UTC

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:39:10 UTC