- From: Daniel Holbert via GitHub <sysbot+gh@w3.org>
- Date: Fri, 06 Apr 2018 17:25:46 +0000
- To: public-css-archive@w3.org
Let me run two examples by you to be sure I'm understanding correctly:
**Example 1**: consider a flex container with two items and "space-between":
````
<flex style="width:100px;
column-gap: 10px;
justify-content: space-between">
<item style="width: 20px"></item>
<item style="width: 20px"></item>
</flex>
````
In a world without `column-gap`, we'd end up with 60px of packing space between the items. (100px-20px-20px) How does the `column-gap` change this?
(I'm guessing it wouldn't change anything visually -- there'd still be 60px between the items -- but conceptually, 10px would be a "gap" and 50px would be from "justify-content". Is that right?)
**Example 2**: Same as the first, except now suppose we have `justify-content: space-around` instead of `space-between`. In a world without `column-gap`, we'd end up with 30px of packing space in the middle and 15px at either end (from dividing the 60px of packing space into one chunk at the beginning and a half chunk at either end.) How does `column-gap` change this?
(I'm guessing that in this case, we'd preallocate a 10px "gap" between the items, leaving only 50px of packing space for `justify-content` to work with... So we'd end up with justify-content computing a packing space to be 25px wide, which gives us 12.5px of packing space at either end and 35px in the middle -- 25px plus the 10px column-gap. Is that right?)
--
GitHub Notification of comment by dholbert
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/2336#issuecomment-379321095 using your GitHub account
Received on Friday, 6 April 2018 17:25:50 UTC