- index.html
- style.css
HTML
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Сортировка элементов на CSS</title>
<link href="" rel="stylesheet">
<link href="style.css" rel="stylesheet">
</head>
<body class="subtle">
<label for="sort">Сортировать по вкусу</label>
<input type="checkbox" id="sort" name="sort" class="input-sort">
<ol class="sort-list">
<li><a href="/">Мясо</a></li>
<li><a href="/">Рыба</a></li>
<li><a href="/">Сметана</a></li>
<li><a href="/">Молоко</a></li>
<li><a href="/">Сыр</a></li>
</ol>
</body>
</html>
CSS
.sort-list {
}
.input-sort:checked ~ .sort-list {
}
Вы перешли на другую страницу
Кликните внутри мини-браузера, чтобы поставить фокус в это окно.
ЗадачиВыполнено
0
- Блоку
.sort-listзадайте раскладку флексбокса - и направление главной оси сверху вниз.
- При выделенном состоянии чекбокса
.input-sortдля блока.sort-listзадайте направление главной оси снизу вверх.
Переключайте чекбокс, чтобы сортировать элементы списка.