RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-26 23:17:46 +00:00
Code Issues Activity Actions

LibWeb: Implement flex reverse layouts

Browse source 
This builds on the work done by implementing the flex order CSS
property and implements flex reverse layouts by just reversing
the order and the items within each order bucket.
This commit is contained in:
Enver Balalic 2022-04-02 11:29:55 +02:00 • committed by Andreas Kling
parent 645d49fa53
commit 747f347b75
3 changed files with 22 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

6
Base/res/html/misc/flex-order.html
View file

@ -76,6 +76,12 @@
<div class="box" style="order: 1;flex: 80% 0 1;">2</div>
<div class="box" style="flex: 80% 0 0;">3</div>
</div>
<p>1/1/<> - reverse</p>
<div class="my-container" style="flex-direction: row-reverse; width: 500px;">
<div class="box" style="order: 1;flex: 80% 0 4;">1</div>
<div class="box" style="order: 1;flex: 80% 0 1;">2</div>
<div class="box" style="flex: 80% 0 0;">3</div>
</div>
<p>3/-1/-2</p>
<div class="my-container" style="width: 500px;">
<div class="box" style="order: 3;flex: 80% 0 4;">1</div>