ErisCyan / minerva
Transfer to URL with SHA Find file
Newer
Older
minerva / Base / res / html / misc / flex-order.html
@minerva minerva on 13 Jul 3 KB Initial commit
Raw Blame History 
<!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>