https://pastein.ru/t/FNA
Загрузка данных
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Практическое занятие №9: Верстка на основе Flexbox</title>
<style>
/* Общие стили для демонстрационной страницы */
body {
font-family: 'Times New Roman', serif;
background-color: #f4f4f9;
color: #333;
padding: 20px;
margin: 0;
}
h1 {
text-align: center;
color: #111;
}
.task-container {
background: #fff;
border: 1px solid #ccc;
border-radius: 6px;
padding: 20px;
margin-bottom: 30px;
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.task-title {
font-weight: bold;
font-size: 1.1rem;
margin-bottom: 15px;
border-bottom: 1px dashed #bbb;
padding-bottom: 5px;
}
/* Стили флекс-контейнеров и элементов (как на скриншотах) */
.flex-container {
background-color: #d1d5db; /* Серый фон из методички */
border: 1px dashed #9ca3af;
min-height: 140px;
padding: 10px;
display: flex;
}
.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;
font-weight: bold;
font-size: 1.2rem;
}
/* --- ЗАДАНИЕ 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.lang-js { font-size: 0.9rem; padding-top: 15px; }
.item.lang-css { font-size: 1.4rem; }
.item.lang-html { font-size: 2rem; }
/* --- ЗАДАНИЕ 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: 220px; align-content: space-between; }
/* --- ЗАДАНИЕ 6: flex-wrap --- */
.wrap-container { flex-wrap: wrap; width: 220px; }
</style>
</head>
<body>
<h1>Практическое занятие №9<br>Верстка на основе flex-контейнеров (Flexbox)</h1>
<div class="task-container">
<div class="task-title">Задание: Расположите элементы с использованием значения row, row-reverse, column, column-reverse.</div>
<p><code>row</code> (слева направо):</p>
<div class="flex-container dir-row">
<div class="item"></div><div class="item"></div>
</div>
<p><code>row-reverse</code> (справа налево):</p>
<div class="flex-container dir-row-reverse">
<div class="item"></div><div class="item"></div>
</div>
<p><code>column</code> (сверху вниз):</p>
<div class="flex-container dir-column">
<div class="item"></div><div class="item"></div>
</div>
<p><code>column-reverse</code> (снизу вверх):</p>
<div class="flex-container dir-column-reverse">
<div class="item"></div><div class="item"></div>
</div>
</div>
<div class="task-container">
<div class="task-title">Задание: Расположите элементы с использованием значения justify-content.</div>
<p><code>flex-start</code>:</p>
<div class="flex-container jc-start">
<div class="item"></div><div class="item"></div><div class="item"></div>
</div>
<p><code>flex-end</code>:</p>
<div class="flex-container jc-end">
<div class="item"></div><div class="item"></div><div class="item"></div>
</div>
<p><code>center</code>:</p>
<div class="flex-container jc-center">
<div class="item"></div><div class="item"></div><div class="item"></div>
</div>
<p><code>space-between</code>:</p>
<div class="flex-container jc-between">
<div class="item"></div><div class="item"></div><div class="item"></div>
</div>
<p><code>space-around</code>:</p>
<div class="flex-container jc-around">
<div class="item"></div><div class="item"></div><div class="item"></div>
</div>
<p><code>space-evenly</code>:</p>
<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="task-title">Задание: Расположите элементы по базовой линии (align-items: baseline).</div>
<div class="flex-container ai-baseline">
<div class="item lang-js">JavaScript</div>
<div class="item lang-css">CSS</div>
<div class="item lang-html">HTML</div>
</div>
</div>
<div class="task-container">
<div class="task-title">Задание: Индивидуальное выравнивание элементов с помощью align-self.</div>
<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="task-title">Задание: Расположите элементы с использованием значения align-content (многострочность).</div>
<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="task-title">Задание: Расположите элементы с использованием значения flex-wrap (перенос строк).</div>
<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>