- index.html
- style.css
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Multi-line flex containers and flex-grow</title>
<link href="course.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
</head>
<body class="world">
<div class="spot">
<div class="skate racoon-pink"></div>
<div class="skate racoon-gray"></div>
<div class="skate racoon-orange"></div>
</div>
</body>
</html>
CSS
.spot {
display: flex;
flex-wrap: nowrap;
width: 450px;
height: auto;
}
.skate {
flex-basis: 120px;
}
.racoon-green {
}
You’ve gone to a different page
Click inside the mini-browser to shift the focus onto this window.
Goalscompleted
0
- Finally add the skateboard with the Green Raccoon as the last item to the
.spotclearing by creating a div with theskateandracoon-greenclasses. - Configure flex items to overflow onto a new line for the
.spotblock, - and then assign a growth factor of
1to the green raccoon. - Finally, add a skateboard with a Brown Raccoon after the Green Raccoon by creating a div with the
skateandracoon-brownclasses.
Comments