add first flex exercise

2021-08-18 15:46:54 -05:00 · 2021-08-18 15:46:54 -05:00 · 9eacdd9d97
parent e4bc64a193
commit 9eacdd9d97
4 changed files with 42 additions and 0 deletions
--- a/flex/flex-center/README.md
+++ b/flex/flex-center/README.md
@ -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?
+
--- a/flex/flex-center/desired-outcome.png
+++ b/flex/flex-center/desired-outcome.png
--- a/flex/flex-center/index.html
+++ b/flex/flex-center/index.html
@ -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>
--- a/flex/flex-center/style.css
+++ b/flex/flex-center/style.css
@ -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;
+}