mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2024-09-29 08:11:13 +00:00
747f347b75
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.
106 lines
3.6 KiB
HTML
106 lines
3.6 KiB
HTML
<!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>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>
|
|
<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>
|