Загрузка данных

Вот готовый чистый код без лишнего текста и описаний заданий, оптимизированный под переданную вами теорию и скриншоты (с правильной семантикой Flexbox, включая нужные классы для `baseline`, `align-self` и переноса блоков):

```html
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Практическое занятие №9</title>
    <style>
        body {
            background-color: #f4f4f9;
            padding: 20px;
            margin: 0;
        }
        .task-container {
            background: #fff;
            border: 1px solid #ccc;
            padding: 20px;
            margin-bottom: 30px;
        }
        .flex-container {
            display: flex;
            background-color: #d1d5db;
            border: 1px dashed #9ca3af;
            min-height: 140px;
            padding: 10px;
            margin-bottom: 20px;
        }
        .item {
            background-color: #fff;
            border: 2px solid #4b5563;
            border-radius: 12px;
            width: 50px;
            height: 50px;
            margin: 5px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* --- 1. flex-direction --- */
        .dir-row { flex-direction: row; }
        .dir-row-reverse { flex-direction: row-reverse; }
        .dir-column { flex-direction: column; min-height: 260px; }
        .dir-column-reverse { flex-direction: column-reverse; min-height: 260px; }

        /* --- 2. justify-content --- */
        .jc-start { justify-content: flex-start; }
        .jc-end { justify-content: flex-end; }
        .jc-center { justify-content: center; }
        .jc-between { justify-content: space-between; }
        .jc-around { justify-content: space-around; }
        .jc-evenly { justify-content: space-evenly; }

        /* --- 3. align-items (baseline) --- */
        .ai-baseline { align-items: baseline; }
        .item.b-1 { font-size: 14px; height: 40px; padding-top: 10px; }
        .item.b-2 { font-size: 20px; height: 55px; }
        .item.b-3 { font-size: 28px; height: 70px; }

        /* --- 4. align-self --- */
        .as-container { align-items: stretch; }
        .as-start { align-self: flex-start; }
        .as-center { align-self: center; }
        .as-end { align-self: flex-end; }

        /* --- 5. align-content --- */
        .ac-container { flex-wrap: wrap; height: 200px; align-content: space-between; }

        /* --- 6. flex-wrap --- */
        .wrap-container { flex-wrap: wrap; width: 220px; }
        .nowrap-container { flex-wrap: nowrap; }
        .wrap-reverse-container { flex-wrap: wrap-reverse; }
    </style>
</head>
<body>

    <div class="task-container">
        <div class="flex-container dir-row">
            <div class="item"></div><div class="item"></div>
        </div>
        <div class="flex-container dir-row-reverse">
            <div class="item"></div><div class="item"></div>
        </div>
        <div class="flex-container dir-column">
            <div class="item"></div><div class="item"></div>
        </div>
        <div class="flex-container dir-column-reverse">
            <div class="item"></div><div class="item"></div>
        </div>
    </div>

    <div class="task-container">
        <div class="flex-container jc-start">
            <div class="item"></div><div class="item"></div><div class="item"></div>
        </div>
        <div class="flex-container jc-end">
            <div class="item"></div><div class="item"></div><div class="item"></div>
        </div>
        <div class="flex-container jc-center">
            <div class="item"></div><div class="item"></div><div class="item"></div>
        </div>
        <div class="flex-container jc-between">
            <div class="item"></div><div class="item"></div><div class="item"></div>
        </div>
        <div class="flex-container jc-around">
            <div class="item"></div><div class="item"></div><div class="item"></div>
        </div>
        <div class="flex-container jc-evenly">
            <div class="item"></div><div class="item"></div><div class="item"></div>
        </div>
    </div>

    <div class="task-container">
        <div class="flex-container ai-baseline">
            <div class="item b-1">JavaScript</div>
            <div class="item b-2">CSS</div>
            <div class="item b-3">HTML</div>
        </div>
    </div>

    <div class="task-container">
        <div class="flex-container as-container">
            <div class="item as-end"></div>
            <div class="item as-center"></div>
            <div class="item as-start"></div>
        </div>
    </div>

    <div class="task-container">
        <div class="flex-container ac-container">
            <div class="item"></div><div class="item"></div><div class="item"></div>
            <div class="item"></div><div class="item"></div><div class="item"></div>
        </div>
    </div>

    <div class="task-container">
        <div class="flex-container wrap-container">
            <div class="item"></div><div class="item"></div><div class="item"></div>
            <div class="item"></div><div class="item"></div>
        </div>
    </div>

</body>
</html>

```