Re: [csswg-drafts] [css-align] behaviour for width or flex-basis of flex items when gap applied to flex container

> With CSS grid this is not possible because each item's width cannot effect one another from what I'm understand.

Correct, but that underlines the other big difference between Flexbox and Grid - the width of a grid item has no effect on which row it ends up on, only the span does. Thus if the space is reduced by `gap`, that's fine, everything still sits in the same place.  Flexbox is the exact opposite - the width is the *only* thing that determines which row its in, so adding a `gap` can change the row of some of the items.

This is why taking the gap into account when calculating %s on flex items is hard — the number of gaps affects the space available, but the space available can affect how many items will fit on the row, which affects how many gaps there will be.  (It's not *impossible* to resolve this — we solve the exact same problem for `::first-line` — but it's awkward and weird and we'd prefer to avoid it unless absolutely necessary.)

> As a designer I would want this content to align to a grid with columns and gutters and it would be annoying to have to minus the gap from the width for it to line up correctly.

Trying to get a multiline flexbox to act like a grid is always going to be problematic. You can sometimes do it, but it'll always be somewhat fragile and hacky; it's not what the layout mode is designed to do.  You should really be using Grid for this.

It sounds like you might be asking for "make this grid item automatically get an appropriate span, according to its size", which is tracked in <https://github.com/w3c/csswg-drafts/issues/1373>.

> This brings me to my next point which is why don't we allow gap to work on any block or inline-block element?

The most straightforward answer is "because margin-collapsing is already complicated enough".  Flex items, grid items, and multicol columns don't have collapsing margins; their margin boxes are treated as inviolate and don't overlap by default. Thus it's easy to put a gap between those margin boxes.  Blocks don't behave this way — they collapse adjacent margins together, so there's no good notion of "between" where we could place the gaps.

We could *disable* margin collapsing when you use gaps, perhaps, but that would be relatively disruptive.  Margins generally work fine, as blocks are single-line.  The one place they're awkward is when the container has border/padding, and so the first and last children's margins can't collapse outside of the container; you then have to manually target them and set their top/bottom margin to `0`.  This is the exact problem that `gap` was designed to solve. ^_^ But there's a long-planned workaround that makes this work without disrupting current margin-collapsing behavior, tracked at <https://wiki.csswg.org/ideas/margin-collapsing> - automatically discard the margins of the first/last children, so they fit snugly into the container.

For inlines, we already have a property that's basically identical to `gap` - `word-spacing`.  For example:

```html
<!DOCTYPE html>
<div class=one><span>foo foo</span> <span>bar bar</span> <span>baz baz</span> <span>qux qux</span></div>
<div class=two><span>foo foo</span> <span>bar bar</span> <span>baz baz</span> <span>qux qux</span></div>
<style>
div { word-spacing: 1em; border: thin dotted; margin: 5px; }
div.two { width: 200px; }
span { display: inline-block; word-spacing: normal; }
</style>
```

Here, we use word-spacing to create a "gap" of 1em between the spans, which works properly when the text wraps (no annoying gap at the beginning or end of the lines).  We just have to be careful because the property inherits, so you need to reset it to `normal` on the spans themselves.

-- 
GitHub Notification of comment by tabatkins
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/2668#issuecomment-388448248 using your GitHub account

Received on Friday, 11 May 2018 18:30:38 UTC