The CSS Alignment & CSS Flexbox specs are unclear on the effects of auto margins on abspos flex children (and presumably grid children as well).
WHAT DO BROWSERS CURRENTLY DO:
auto margins as "0", on abspos flex children. (unlike on normal flex items)TESTCASE (comparing normal flex items to abspos flex items, with "auto" margins):
https://jsfiddle.net/h5mtn6wa/
Here's most relevant css-flexbox spec quote I could find:
The static position of an absolutely-positioned child of a flex container is determined such that the child is positioned as if it were the sole flex item in the flex container, assuming both the child and the flex container were fixed-size boxes of their used size.
https://drafts.csswg.org/css-flexbox-1/#abspos-items
This doesn't mention margins at all, and it leaves the implication that (a) the margin-box is what's aligned (just as with normal flex items) and (b) auto margins should be honored, since this is what happens for flex items. So, superficially this seems to disagree with Chrome/Edge.
Here's the most relevant css-align spec quote I could find:
6.2. Block/Cross-Axis Alignment: the align-self property
[...]
6.2.3. Static Position of Absolutely-Positioned Boxes
Alignment Subject | The element’s margin box after laying out the element, treated as fixed-size for the purpose of alignment.
https://drafts.csswg.org/css-align-3/#align-abspos-static
[...]
6.2.5. Flex Items
Alignment Subject | The flex item’s margin box.
This, too, doesn't make it clear that there would be any distinction between the handling of auto margins for abspos flex children vs. "real" flex items. (I suppose it depends on whether "laying out the element" includes "resolving auto margins", and (if so) what's expected to happen there.)
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.3