W3C home > Mailing lists > Public > public-css-archive@w3.org > February 2018

Re: [csswg-drafts] [css-align][css-flexbox] align or flexbox spec should provide details of how "column-gap" & "row-gap" influence flex layout

From: Daniel Holbert via GitHub <sysbot+gh@w3.org>
Date: Tue, 20 Feb 2018 21:14:35 +0000
To: public-css-archive@w3.org
Message-ID: <issue_comment.created-367121623-1519161274-sysbot+gh@w3.org>
In particular -- the current css-algin spec text is as follows:
> **flex containers**
>    When applied to the main axis (e.g. column-gap in a row flex container), indicates minimum spacing between items, as if a fixed-size margin were inserted between adjacent flex items in a single line.
>    When applied to the cross axis (e.g. row-gap in a row flex container), indicates minimum spacing between adjacent flex lines

First, a wording nit --  "as if a fixed-size margin were inserted between adjacent flex items":
 - It's unclear whether this is between the adjacent items' border-boxes (and *overlays* their existing margins) vs. between their margin-boxes (and is entirely *separate* from their margins).  If it's the latter, perhaps we should avoid using the term "margin" here to avoid confusion...

Also, here are some places where I think these gaps need to be accounted for, in flex layout (where the flexbox spec currently calls for arithmetic that breaks if we introduce gaps, and/or is vague about how gaps would interact):

- 9.3 [Figuring out how many flex items should fit in each line of a multi-line flex container](https://drafts.csswg.org/css-flexbox-1/#algo-line-break) - we need to include gaps in this calculation, if we don't want to have items needlessly overflow or shrink later on.
- 9.4: "align-content: stretch" - right now this says to [increase lines' cross sizes until their sum "exactly equals the flex container’s inner cross size."](https://drafts.csswg.org/css-flexbox-1/#algo-line-stretch) This probably isn't strictly what we want anymore, if there are supposed to be gaps between the lines.
- 9.5: ["distribute any remaining free space"](https://drafts.csswg.org/css-flexbox-1/#algo-main-align) via 'auto' margins & justify-content:
Presumably, gaps need to be subtracted from the remaining free space *before* this distribution, correct?
And then: if we do still have free space to distribute after we've subtracted those gaps, the spec needs to make it clear whether our preallocated gaps are *overlaid* vs. *distinct from* the packing space that we subsequently allocate to margins or justify-content here. (I'm guessing the gaps are *distinct from* auto margins [and all item margins], but they *overlay* `justify-content` packing space?)
- 9.6: ["Align all flex lines per align-content"](https://drafts.csswg.org/css-flexbox-1/#algo-line-align) - the spec needs to clarify how grid gaps influence/interact with this step. In particular: are the gaps created & subtracted from the free space *before* this point (which e.g. could remove free space that we otherwise would've distributed to the beginning/end via `align-content:space-around`), or *after* this (which might grow the total packing space if align-content already allocated some at the beginning/end, and could then cause lines to overflow the container)?  I'm guessing the former (gaps subtracted before this point), but this needs to be clear.
- 9.7 "[Resolve the flexible lengths](https://drafts.csswg.org/css-flexbox-1/#resolve-flexible-lengths)" - Gaps need to be accounted for in various places here. They probably need to be added to the *Sum the outer...sizes* quantities, in "Step 1" and "Step 3" there.
- 9.9 [Intrinsic size calculations](https://drafts.csswg.org/css-flexbox-1/#intrinsic-main-sizes) for a flex container (which now should allocate space for gaps in each dimension, probably)

GitHub Notification of comment by dholbert
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/2336#issuecomment-367121623 using your GitHub account
Received on Tuesday, 20 February 2018 21:15:08 UTC

This archive was generated by hypermail 2.4.0 : Tuesday, 5 July 2022 06:41:24 UTC