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

It's ok. It just makes me feel like I don't know what I'm talking about and I felt like I was waisting your time. I hope my reply didn't come across too impolite either.

You're right in my example, it will make the items push out further than the width of the container. I meant to put `wrap` in my head but put `nowrap` instead, hectic day I guess.

It's fine if the proposal is that gap has no effect on how %s resolve although I think we might be missing out on allowing authors the control they need. One advantage flex has over grid is that it's content can influence the layout. Setting a width on the items inside the flex container can change the overall layout, especially if `wrap` is enabled. With CSS grid this is not possible because each item's width cannot effect one another from what I'm understand.

One use case is if you wanted to have the contents of the flex container dictate their own sizes and therefore effect the layout of the whole container. This can be useful for layouts where the size of the content is important. Flex items can be added and removed and will allow content to adapt as needed because it is fluid. 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.

Also does flex-basis work on the basis that it takes up the available space

This brings me to my next point which is why don't we allow `gap` to work on any block or inline-block element? I don't see why `gap` has to be specific to flex and grid. It's a very useful property that millions of designers have had to contend without for years by using negative margin's to simulate gutters. You can use `:first-child` or `:last-child` selector to turn the margin of the first or last item off but when designing for responsive this is a pain because the margin is visible when the items run onto two rows.

I started working on a [PostCSS plugin](https://github.com/mindthetic/postcss-gutters) a while ago that tries to help with creating gutters and then that's when I saw that there was a proposal to allow the gap property to work for flex boxes also. Now I'm considering changing it to be more inline with the draft spec so that it could maybe be useful as a polyfill. It would be good to get your eyes on it as I'd like it to adhere to the spec as close as I can. It works with nested containers which I found an interesting challenge when it came to mixing containers with gaps in pixels and gaps in percentages. Would love to get your thoughts.

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

Received on Friday, 11 May 2018 18:09:43 UTC