Got introduced to Flexbox

Harshvdev · Harshvdev · commit 28f5a1bcf68e · 2025-05-18T23:37:28.000+05:30
Practiced visually on flexboxfroggy.com
diff --git a/Day-29/README.md b/Day-29/README.md
@@ -0,0 +1,14 @@
+#100DaysofCode 
+
+**Day-29**
+
+Got introduced to Flexbox in The Odin Project and learned visually from the flexboxfroggy website.
+
+- display: flex goes on the container, not items
+- align-items (all) vs align-self (one)
+- order changes the visual order without touching HTML (Still don't understand well)
+- flex-direction, flex-wrap, justify-content, flex-flow, and align-content
+
+I'll learn more about Flexbox tomorrow!
+
+
diff --git a/Day-29/index.html b/Day-29/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Flexbox</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+  <div class="flex-container">
+    <div>
+      <div><div></div></div>
+    </div>
+    <div>Second Div</div>
+    <div>Third Div</div>
+  </div>
+</body>
+</html>
diff --git a/Day-29/style.css b/Day-29/style.css
@@ -0,0 +1,8 @@
+.flex-container > div {
+  background-color: peachpuff;
+  border: 12px solid maroon;
+  padding: 20px;
+  height: 100px;
+  max-width: 120px;
+  flex: 3000;
+}
