- index.html
- style.css
HTML
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Пропорциональное растягивание элементов</title>
<link href="course.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
</head>
<body class="world world-flat">
<div class="spot spot-1">
<div class="skate no-width racoon-green"></div>
<div class="skate no-width racoon-brown"></div>
<div class="ruler ruler-green w-100">100px</div>
<div class="ruler ruler-brown w-200 l-100">200px</div>
</div>
<div class="spot spot-2">
<div class="skate no-width racoon-green"></div>
<div class="skate no-width racoon-brown"></div>
<div class="ruler ruler-green w-200">200px</div>
<div class="ruler ruler-brown w-300 l-200">300px</div>
</div>
</body>
</html>
CSS
.spot {
display: flex;
padding: 10px 0;
height: 100px;
}
.spot-1 {
width: 300px;
}
.spot-1 .skate {
flex-basis: 50px;
}
.spot-1 .racoon-green {
flex-grow: 0;
}
.spot-1 .racoon-brown {
flex-grow: 0;
}
.spot-2 {
width: 500px;
}
.spot-2 .skate {
flex-basis: 100px;
}
.spot-2 .racoon-green {
flex-grow: 0;
}
.spot-2 .racoon-brown {
flex-grow: 0;
}
Вы перешли на другую страницу
Кликните внутри мини-браузера, чтобы поставить фокус в это окно.
ЗадачиВыполнено
0
- Задайте енотам на верхней поляне
.spot-1значенияflex-growтак, чтобы их ширина стала равной ширине «линеек». - Сделайте то же самое с енотами на нижней поляне
.spot-2.
В этом задании можно менять только значения flex-grow.