Closed
Description
https://drafts.csswg.org/css-align/#distribution-values
| Alignment | Fallback |
|---|---|
space-between |
flex-start |
space-around |
safe center |
space-evenly |
safe center |
As per https://drafts.csswg.org/css-align/#valdef-overflow-position-safe, safe center will basically behave as start, which differs from the flex-start of space-between.
Blink seems to treat all of them as flex-start
<!DOCTYPE html>
<style>
.flex { display: inline-flex; flex-wrap: wrap-reverse; flex-direction: row-reverse; height: 100px; width: 100px; border: solid; margin: 30px; }
.flex::before { content: ""; height:125%; width: 125%; flex-shrink: 0; z-index: -1; background: cyan; }
</style>
<div class="flex" style="place-content: space-between"></div>
<div class="flex" style="place-content: space-around"></div>
<div class="flex" style="place-content: space-evenly"></div>