-
Notifications
You must be signed in to change notification settings - Fork 766
Description
Effect on Running Positions
If an item has negative margins, it's not clear in the spec how this will affect the placement of the items following it in the same track.
In masonry, we might see something like this, where item 2 has negative margins that cause it to end earlier than item 1:
Would we want the 3rd item in the track to be placed right after item 2:
or have it placed after item 1, which ends at a greater running position than item 2:
In CSS Flex, when an item has negative margins, the items following it are always placed directly after.
When we only have 2 items, and the second one has a negative margin greater than the width of the first item, we see the end of the first item peeking out underneath:
<div class="flex">
<div style="background: lightblue;"> hello world </div>
<div style="background: lightgreen; margin-top: -25px;"> hello world </div>
</div>
If we had a third item, it will be placed directly after the second item, covering up the end of the first item.
<div class="flex">
<div style="background: lightblue;"> hello world </div>
<div style="background: lightgreen; margin-top: -25px;"> hello world </div>
<div style="background: lightpink;"> hello world </div>
</div>
Based on this behavior, it would seem that we would want the same for masonry, where the running position for each track is set to be whatever is the most recently placed item in that track, and items placed later in that track go directly behind it.
Effect on Dense Packing
In dense-packing, the placement of items with negative margins inside track openings may look strange. If an item's negative margin is great enough, it may look like it's an out-of-flow item above the other items:
Or the item with negative margin may not take up as much of the track opening as the height of the item indicates:
Or the item could bleed into another track opening (accounting for this in the track opening it bleeds into would be very difficult):
Effects on Alignment
If we do end up adding support for alignment in the stacking axis, negative margins would raise questions similar to what we are currently discussing in #10275.
Metadata
Metadata
Assignees
Labels
Type
Projects
Status