<!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/style.css">

</head>

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

        <h4>01. justify-content: flex-start</h4>
        <ul class="one">
            <li class="red">1</li>
            <li class="green">2</li>
            <li class="blue">3</li>
            <li class="orange">4</li>
        </ul>

        <h4>02. justify-content: flex-end</h4>
        <ul class="two">
            <li class="red">1</li>
            <li class="green">2</li>
            <li class="blue">3</li>
            <li class="orange">4</li>
        </ul>

        <h4>03. justify-content: center</h4>
        <ul class="three">
            <li class="red">1</li>
            <li class="green">2</li>
            <li class="blue">3</li>
            <li class="orange">4</li>
        </ul>

        <h4>04. justify-content: space-between</h4>
        <ul class="four">
            <li class="red">1</li>
            <li class="green">2</li>
            <li class="blue">3</li>
            <li class="orange">4</li>
        </ul>

        <h4>05. justify-content: space-around</h4>
        <ul class="five">
            <li class="red">1</li>
            <li class="green">2</li>
            <li class="blue">3</li>
            <li class="orange">4</li>
        </ul>

        <h4>06. align-items: flex-start</h4>
        <ul class="six">
            <li class="red">1</li>
            <li class="green">2</li>
            <li class="blue">3</li>
            <li class="orange">4</li>
        </ul>

        <h4>07. align-items: flex-end</h4>
        <ul class="seven">
            <li class="red">1</li>
            <li class="green">2</li>
            <li class="blue">3</li>
            <li class="orange">4</li>
        </ul>

        <h4>08. align-items: center</h4>
        <ul class="eight">
            <li class="red">1</li>
            <li class="green">2</li>
            <li class="blue">3</li>
            <li class="orange">4</li>
        </ul>

        <h4>09. flex-wrap: wrap</h4>
        <ul class="nine">
            <li class="red">1</li>
            <li class="green">2</li>
            <li class="blue">3</li>
            <li class="orange">4</li>
        </ul>

        <h4>10. align-self: flex-end</h4>
        <ul class="ten">
            <li class="red">1</li>
            <li class="green">2</li>
            <li class="blue">3</li>
            <li class="orange">4</li>
        </ul>

        <h4>11. order: 2</h4>
        <ul class="eleven">
            <li class="red">1</li>
            <li class="green">2</li>
            <li class="blue">3</li>
            <li class="orange">4</li>
        </ul>

        <h4>12. flex: auto</h4>
        <ul class="twelve">
            <li class="red">1</li>
            <li class="green">2</li>
            <li class="blue">3</li>
            <li class="orange">4</li>
        </ul>
    </div>
</body>

</html>