mirror of
https://github.com/RGBCube/serenity
synced 2025-10-31 18:02:44 +00:00
30feb95d53
We were not taking reverse flex directions into account when choosing the initial offset for flex item placement if justify-content were either space-around or space-between.
20 lines
No EOL
916 B
HTML
20 lines
No EOL
916 B
HTML
<!doctype html><style>
|
|
.outer {
|
|
display: flex;
|
|
width: 150px;
|
|
height: 150px;
|
|
justify-content: space-around;
|
|
background: pink;
|
|
}
|
|
.row { flex-direction: row; }
|
|
.row-reverse { flex-direction: row-reverse; }
|
|
.column { flex-direction: column; }
|
|
.column-reverse { flex-direction: column-reverse; }
|
|
.inner {
|
|
background: orange;
|
|
}
|
|
</style>
|
|
<div class="outer row"><div class="inner">Well</div><div class="inner">hello</div><div class="inner">friends</div></div>
|
|
<div class="outer row-reverse"><div class="inner">Well</div><div class="inner">hello</div><div class="inner">friends</div></div>
|
|
<div class="outer column"><div class="inner">Well</div><div class="inner">hello</div><div class="inner">friends</div></div>
|
|
<div class="outer column-reverse"><div class="inner">Well</div><div class="inner">hello</div><div class="inner">friends</div></div> |