W3C home > Mailing lists > Public > public-css-archive@w3.org > October 2016

[csswg-drafts] [css-flexbox] Make it easier to define margins that only apply between flex-items

From: Amelia Bellamy-Royds via GitHub <sysbot+gh@w3.org>
Date: Tue, 11 Oct 2016 22:15:37 +0000
To: public-css-archive@w3.org
Message-ID: <issues.opened-182388371-1476224136-sysbot+gh@w3.org>
AmeliaBR has just created a new issue for 
https://github.com/w3c/csswg-drafts:

== [css-flexbox] Make it easier to define margins that only apply 
between flex-items ==
In flexbox it is often desired to apply a fixed or minimum margin 
_between_ items, without adding a margin in between items and the 
edges of the container.  As far as I can tell, there is no non-hacky 
way to do this.

The [`justify-content` 
property](https://drafts.csswg.org/css-flexbox/#justify-content-property)
 allows you to specify that extra space should only go in between, and
 not at the edges. But if there isn't any extra space to distribute, 
that items end up squished next to each other with no margin.

If you apply a fixed margin on the individual flex items, you can 
ensure they are spaced out, but then that margin effectively creates 
extra padding space inside the flex container.  This can throw off 
your overall page alignment.

For a single-line flex container, you could use 
`:first-child`/`:last-child` selectors to remove the margins on the 
outside edge.  But that's not possible in a multi-line flex layout, 
when you don't know which items will be at the edges.

The "best" solution I've seen so far is the one used by @heydonworks 
in his [fukol](https://github.com/Heydon/fukol-grids) code snippet: 
apply a _negative_ margin on the flex container to cancel out the 
margin on the flex items inside it.  And then maybe wrap the flex 
container in an extra `div` if you need to apply its own positive 
margins under certain conditions.

This works for most cases, but it is undeniably a hack.  Can we get a 
neater solution?  Perhaps a flex-specific margin property that 
overrides the regular margin in the flex-direction and has a 
space-around vs space-between option?  Perhaps this could be part of 
the spec update that also figures out what to do with percentage 
margins in flexbox?



Please view or discuss this issue at 
https://github.com/w3c/csswg-drafts/issues/592 using your GitHub 
account
Received on Tuesday, 11 October 2016 22:15:45 UTC

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