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

LibWeb: Implement the flex order CSS property

Browse source 
Adds support for the flex order property and a test page for it
on the browser welcome page.
This commit is contained in:
Enver Balalic 2022-03-31 22:11:38 +02:00 • committed by Andreas Kling
parent 2377344a89
commit 58398b1e12
9 changed files with 142 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

99
Base/res/html/misc/flex-order.html Normal file
View file

@ -0,0 +1,99 @@
<!DOCTYPE html>
<html>
<head>
<title>Flex</title>
<style>
.my-container {
display: flex;
border: 1px solid salmon;
}
.box {
width: 100px;
height: 100px;
border: 1px solid black;
}
.inline {
display: inline-block
}
</style>
</head>
<body>
<p>2/0/1</p>
<div class="my-container" style="width: 500px;">
<div class="box" style="order: 2;flex: 80% 0 4;">1</div>
<div class="box" style="order: 0;flex: 80% 0 1;">2</div>
<div class="box" style="order: 1;flex: 80% 0 0;">3</div>
</div>
<p>2/0/1 - reverse</p>
<div class="my-container" style="flex-direction: row-reverse; width: 500px;">
<div class="box" style="order: 2;flex: 80% 0 4;">1</div>
<div class="box" style="order: 0;flex: 80% 0 1;">2</div>
<div class="box" style="order: 1;flex: 80% 0 0;">3</div>
</div>
<p>2/<>/1</p>
<div class="my-container" style="width: 500px;">
<div class="box" style="order: 2;flex: 80% 0 4;">1</div>
<div class="box" style="flex: 80% 0 1;">2</div>
<div class="box" style="order: 1;flex: 80% 0 0;">3</div>
</div>
<p>2/<>/1 - reverse</p>
<div class="my-container" style="flex-direction: row-reverse; width: 500px;">
<div class="box" style="order: 2;flex: 80% 0 4;">1</div>
<div class="box" style="flex: 80% 0 1;">2</div>
<div class="box" style="order: 1;flex: 80% 0 0;">3</div>
</div>
<p>2/0/<></p>
<div class="my-container" style="width: 500px;">
<div class="box" style="order: 2;flex: 80% 0 4;">1</div>
<div class="box" style="order: 0;flex: 80% 0 1;">2</div>
<div class="box" style="flex: 80% 0 0;">3</div>
</div>
<p><>/0/1</p>
<div class="my-container" style="width: 500px;">
<div class="box" style="flex: 80% 0 4;">1</div>
<div class="box" style="order: 0;flex: 80% 0 1;">2</div>
<div class="box" style="order: 1;flex: 80% 0 0;">3</div>
</div>
<p><>/1/<></p>
<div class="my-container" style="width: 500px;">
<div class="box" style="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><>/0/<></p>
<div class="my-container" style="width: 500px;">
<div class="box" style="flex: 80% 0 4;">1</div>
<div class="box" style="order: 0;flex: 80% 0 1;">2</div>
<div class="box" style="flex: 80% 0 0;">3</div>
</div>
<p>1/1/<></p>
<div class="my-container" style="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>
<div class="box" style="order: -1;flex: 80% 0 1;">2</div>
<div class="box" style="order: -2;flex: 80% 0 0;">3</div>
</div>
<p>-2/3/<></p>
<div class="my-container" style="width: 500px;">
<div class="box" style="order: -2;flex: 80% 0 4;">1</div>
<div class="box" style="order: 3;flex: 80% 0 1;">2</div>
<div class="box" style="flex: 80% 0 0;">3</div>
</div>
<p><>/-1/<></p>
<div class="my-container" style="width: 500px;">
<div class="box" style="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>
</body>
</html>