-
-
1
-
-
-
2
-
-
-
3
-
+
Bottom
+
-
diff --git a/flex/style.css b/flex/style.css
index 7950551..7fc70fc 100644
--- a/flex/style.css
+++ b/flex/style.css
@@ -1,52 +1,50 @@
body {
- margin: 0;
border: 0;
+ margin: 0 15px;
font-family: 'Roboto Mono', monospace;
}
h1 {
text-align: center;
+ display: block;
font-size: 18px;
}
-h2 {
- text-align: center;
- font-size: 16px;
+.container {
+ height: 150px;
+ width: 100%;
+ display: flex;
+ background-color: whitesmoke;
}
-.grow,
-.shrink {
- width: 100px;
- height: 100px;
+.side,
+.center {
+ height: 75px;
background-color: dodgerblue;
- border: 2px solid lightgrey;
- margin: 10px 30px;
-}
-
-.grow.side {
- flex-basis: 60px;
- flex-grow: 1;
+ border: 1px solid lightgrey;
+ display: inline-block;
}
-.grow.center {
- flex-grow: 3;
+#top .side {
+ flex-grow: 2;
+ flex-shrink: 2;
+ flex-basis: 100px;
}
-.shrink.side {
- flex-basis: 300px;
+#top .center {
+ flex-grow: 1;
flex-shrink: 3;
+ flex-basis: 50px;
}
-.shrink.center {
+#bottom .side {
+ flex-grow: 1;
flex-shrink: 2;
- flex-basis: 150px;
+ flex-basis: 75px;
}
-#grows,
-#shrinks {
- display: flex;
- background-color: whitesmoke;
- justify-content: center;
- min-height: 200px;
- align-items: center;
+#bottom .center {
+ flex-grow: 2;
+ flex-shrink: 1;
+ flex-basis: 100px;
}