punkfairie/odin-css-exercises
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add first flex exercise

Browse source
This commit is contained in:
Cody Loyd 2021-08-18 15:46:54 -05:00
parent e4bc64a193
commit 9eacdd9d97
4 changed files with 42 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
flex/flex-center/README.md Normal file
View file

@ -0,0 +1,12 @@
# CENTER THIS DIV
This one is simple, but it's something that you'll want to do ALL THE TIME. Might as well get it out of the way now.
All you need to do is center the red div inside the blue container.
## Desired Outcome
![outcome](./desired-outcome.png)
### Self Check
- Is the red div centered?
- Did you _only_ use flexbox to center it?

BIN
flex/flex-center/desired-outcome.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 7.1 KiB

15
flex/flex-center/index.html Normal file
View file

@ -0,0 +1,15 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CENTER THIS DIV</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="box">center this div</div>
</div>
</body>
</html>

15
flex/flex-center/style.css Normal file
View file

@ -0,0 +1,15 @@
.container {
background: dodgerblue;
border: 4px solid midnightblue;
width: 400px;
height: 300px;
}
.box {
background: palevioletred;
font-weight: bold;
text-align: center;
border: 6px solid maroon;
width: 80px;
height: 80px;
}