<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css"
        integrity="sha512-IJEbgDEF7OeKJRa0MY2PApnyJHRIsgzCveek4ec8VWQ+7KG3ZSKVNYa5xP/Gh0hVP0Mwb+gBsk+GwR3JQGhQNg=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="css/flexbox-direction.css">

</head>

<body>
    <div class="wrapper">
        <h1>CSS Flexbox: Direction</h1>

        <h4>01. flex-direction: row</h4>
        <ul class="parent-element-1">
            <li class="red">1</li>
            <li class="green">2</li>
            <li class="blue">3</li>
            <li class="orange">4</li>
        </ul>

        <h4>02. flexdirection: row-reverse</h4>
        <ul class="parent-element-2">
            <li class="red">1</li>
            <li class="green">2</li>
            <li class="blue">3</li>
            <li class="orange">4</li>
        </ul>

        <h4>03. flexdirection: column</h4>
        <ul class="parent-element-3">
            <li class="red">1</li>
            <li class="green">2</li>
            <li class="blue">3</li>
            <li class="orange">4</li>
        </ul>

        <h4>04. flexdirection: column-reverse</h4>
        <ul class="parent-element-4">
            <li class="red">1</li>
            <li class="green">2</li>
            <li class="blue">3</li>
            <li class="orange">4</li>
        </ul>
    </div>
</body>

</html>