diff --git a/CSS/flexbox/index.html b/CSS/flexbox/index.html index b3f28be..f0ad837 100644 --- a/CSS/flexbox/index.html +++ b/CSS/flexbox/index.html @@ -5,32 +5,39 @@ - Inline + Justify-content -

Inline-flex

-
-
-

1

-
-
-

2

-
-
-

3

-
+

Flex Start

+
+
+
+
-
-
-

1

-
-
-

2

-
-
-

3

-
+

Flex End

+
+
+
+
+
+

Center

+
+
+
+
+
+

Space Around

+
+
+
+
+
+

Space Between

+
+
+
+
\ No newline at end of file diff --git a/CSS/flexbox/style.css b/CSS/flexbox/style.css index d361861..005bd80 100644 --- a/CSS/flexbox/style.css +++ b/CSS/flexbox/style.css @@ -11,14 +11,41 @@ h1 { } .container { - width: 150px; - border: 1px solid grey; - display: inline-flex; + height: 150px; + width: 100%; + display: flex; + background-color: whitesmoke; } .box { background-color: dodgerblue; height: 75px; - width: 75px; - border: 1px solid turquoise; + width: 100px; + border: 1px solid lightgrey; + display: inline-block; +} + +#flexstart { + display: flex; + justify-content: flex-start; +} + +#flexend { + display: flex; + justify-content: flex-end; +} + +#center { + display: flex; + justify-content: center; +} + +#spacearound { + display: flex; + justify-content: space-around; +} + +#spacebetween { + display: flex; + justify-content: space-between; } \ No newline at end of file