-
-
-
+
Step 3
+
diff --git a/flex/style.css b/flex/style.css
index c7d9452..d72115f 100644
--- a/flex/style.css
+++ b/flex/style.css
@@ -1,47 +1,62 @@
body {
+ margin: 0;
+ border: 0;
font-family: 'Roboto Mono', monospace;
}
h1 {
- margin: 20px;
- text-align: center;
font-size: 18px;
}
-.container {
- height: 150px;
- background-color: whitesmoke;
- display: flex;
- justify-content: center;
+h2 {
+ font-size: 16px;
+}
+
+h1,
+h2 {
+ text-align: center;
}
-.left,
-.center,
-.right {
- min-height: 75px;
- width: 125px;
+.top,
+.middle,
+.bottom {
+ width: 100px;
+ height: 100px;
background-color: dodgerblue;
border: 2px solid lightgrey;
+ margin: 10px 30px;
}
-#baseline .center {
- height: 100px;
- width: 100px;
- border: 5px solid turquoise;
+.top.side {
+ flex-grow: 1;
}
-#flexstart {
- align-items: flex-start;
+.top.center {
+ flex-grow: 1;
}
-#flexend {
- align-items: flex-end;
+.middle.side {
+
}
-#center {
- align-items: center;
+.middle.center {
+
+}
+
+.bottom.side {
+
}
-#baseline {
- align-items: baseline;
+.bottom.center {
+
+}
+
+#top,
+#middle,
+#bottom {
+ display: flex;
+ background-color: Whitesmoke;
+ justify-content: center;
+ min-height: 200px;
+ align-items: center;
}