beenull/ladybird
1
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2024-09-29 16:21:29 +00:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity
ladybird/Base/res/html/misc/flex-order.html

106 lines
3.6 KiB
HTML
Raw Normal View History

LibWeb: Implement the flex order CSS property Adds support for the flex order property and a test page for it on the browser welcome page.
2022-03-31 20:11:38 +00:00
<!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>
LibWeb: Implement flex reverse layouts 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.
2022-04-02 09:29:55 +00:00
<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>
LibWeb: Implement the flex order CSS property Adds support for the flex order property and a test page for it on the browser welcome page.
2022-03-31 20:11:38 +00:00
<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>
Reference in a new issue Copy permalink