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>
|
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>
|
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>
|