<pre><code style="color: #000000">&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css" integrity="sha512-NmLkDIU1C/C88wi324HBc+S2kLhi08PN5GDeUVVVC/BVt/9Izdsc9SVeVfA1UZbY3sHUlDSyRXhCzHfr6hmPPw==" crossorigin="anonymous" referrerpolicy="no-referrer" /&gt;
    &lt;link rel="stylesheet" href="css/style.css"&gt;
    &lt;title&gt;Flexbox alignment&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div class="pagewrapper"&gt;
        &lt;h1&gt;CSS Flexbox: Alignment&lt;/h1&gt;
        &lt;h4&gt;01. justify-content: flex-start&lt;/h4&gt;
        &lt;div class="parent one"&gt;
            &lt;div class="child red"&gt;1&lt;/div&gt;
            &lt;div class="child green"&gt;2&lt;/div&gt;
            &lt;div class="child blue"&gt;3&lt;/div&gt;
            &lt;div class="child orange"&gt;4&lt;/div&gt;
         &lt;/div&gt;
        &lt;h4&gt;02. justify-content: flex-end&lt;/h4&gt;
        &lt;div class="parent two"&gt;
            &lt;div class="child red"&gt;1&lt;/div&gt;
            &lt;div class="child green"&gt;2&lt;/div&gt;
            &lt;div class="child blue"&gt;3&lt;/div&gt;
            &lt;div class="child orange"&gt;4&lt;/div&gt;
         &lt;/div&gt;
        &lt;h4&gt;03. justify-content: center&lt;/h4&gt;
        &lt;div class="parent three"&gt;
            &lt;div class="child red"&gt;1&lt;/div&gt;
            &lt;div class="child green"&gt;2&lt;/div&gt;
            &lt;div class="child blue"&gt;3&lt;/div&gt;
            &lt;div class="child orange"&gt;4&lt;/div&gt;
        &lt;/div&gt;
        &lt;h4&gt;04. justify-content: space-between&lt;/h4&gt;
        &lt;div class="parent four"&gt;
            &lt;div class="child red"&gt;1&lt;/div&gt;
            &lt;div class="child green"&gt;2&lt;/div&gt;
            &lt;div class="child blue"&gt;3&lt;/div&gt;
            &lt;div class="child orange"&gt;4&lt;/div&gt;
        &lt;/div&gt;
        &lt;h4&gt;05. justify-content: space-around&lt;/h4&gt;
        &lt;div class="parent five"&gt;
            &lt;div class="child red"&gt;1&lt;/div&gt;
            &lt;div class="child green"&gt;2&lt;/div&gt;
            &lt;div class="child blue"&gt;3&lt;/div&gt;
            &lt;div class="child orange"&gt;4&lt;/div&gt;
        &lt;/div&gt;
        &lt;h4&gt;06. align-items: flex-start&lt;/h4&gt;
        &lt;div class="parent six"&gt;
            &lt;div class="child red"&gt;1&lt;/div&gt;
            &lt;div class="child green"&gt;2&lt;/div&gt;
            &lt;div class="child blue"&gt;3&lt;/div&gt;
            &lt;div class="child orange"&gt;4&lt;/div&gt;
        &lt;/div&gt;
        &lt;h4&gt;07. align-items: flex-end&lt;/h4&gt;
        &lt;div class="parent seven"&gt;
            &lt;div class="child red"&gt;1&lt;/div&gt;
            &lt;div class="child green"&gt;2&lt;/div&gt;
            &lt;div class="child blue"&gt;3&lt;/div&gt;
            &lt;div class="child orange"&gt;4&lt;/div&gt;
        &lt;/div&gt;
        &lt;h4&gt;08. align-items: center&lt;/h4&gt;
        &lt;div class="parent eight"&gt;
            &lt;div class="child red"&gt;1&lt;/div&gt;
            &lt;div class="child green"&gt;2&lt;/div&gt;
            &lt;div class="child blue"&gt;3&lt;/div&gt;
            &lt;div class="child orange"&gt;4&lt;/div&gt;
        &lt;/div&gt;
        &lt;h4&gt;09. flex-wrap: wrap&lt;/h4&gt;
        &lt;div class="parent nine"&gt;
            &lt;div class="child red"&gt;1&lt;/div&gt;
            &lt;div class="child green"&gt;2&lt;/div&gt;
            &lt;div class="child blue"&gt;3&lt;/div&gt;
            &lt;div class="child orange"&gt;4&lt;/div&gt;
        &lt;/div&gt;
        &lt;h4&gt;10. align-self: flex-end&lt;/h4&gt;
        &lt;div class="parent ten"&gt;
            &lt;div class="child red"&gt;1&lt;/div&gt;
            &lt;div class="child green"&gt;2&lt;/div&gt;
            &lt;div class="child blue"&gt;3&lt;/div&gt;
            &lt;div class="child orange"&gt;4&lt;/div&gt;
        &lt;/div&gt;
        &lt;h4&gt;11. order: 2&lt;/h4&gt;
        &lt;div class="parent eleven"&gt;
            &lt;div class="child red"&gt;1&lt;/div&gt;
            &lt;div class="child green"&gt;2&lt;/div&gt;
            &lt;div class="child blue"&gt;3&lt;/div&gt;
            &lt;div class="child orange"&gt;4&lt;/div&gt;
        &lt;/div&gt;
        &lt;h4&gt;12. flex: auto&lt;/h4&gt;
        &lt;div class="parent twelve"&gt;
            &lt;div class="child red"&gt;1&lt;/div&gt;
            &lt;div class="child green"&gt;2&lt;/div&gt;
            &lt;div class="child blue"&gt;3&lt;/div&gt;
            &lt;div class="child orange"&gt;4&lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>