challenges
April 4, 2024
[
Mini uiz
]

Flexercise #1

This is an editable sandbox — try making changes and the preview will update!

<!DOCTYPE html>
<html lang="en">
<head>
<style>
html, body {
height: 90%;
}
body {
background-color: #222222;
}

.wrapper {
height: 100%;
/* add flex styling here */

}
.box {
width: 50px;
height: 50px;
border-radius: 8px;
}
.first {
background-color: #c26b28;
}
.second {
background-color: #dd973b;
}
.third {
background-color: #438fba;
}
.fourth {
background-color: #33699e;
}
</style>
</head>
Open on CodeSandboxOpen Sandbox

Your goal is to add flexbox styles to match this layout:

Four squares arranged horizontally. The left-most square is at the top of the frame, the middle two squares are centered, and the right-most square is at the bottom.

Here are a couple resources that may help:

Go to solution and explanation