testing flexbox

rahilsama · rahilsama · commit 2c57ce9c902f · 2023-02-15T15:14:05.000-07:00
diff --git a/starter/04-CSS-Layouts/flexbox.html b/starter/04-CSS-Layouts/flexbox.html
@@ -40,8 +40,29 @@
         margin: 40px;
 
         /* FLEXBOX */
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+      }
+
+      .el {
+        /*
+        DEFAULTS;
+        flex-grow= 0;
+        flex-shrink= 1;
+        flex-basis = auto;
+        */
+        flex-basis: 100px;
+        /*flex-grow: 1;*/
+      }
+
+      .el--1 {
+        align-self: flex-start;
+        flex-grow: 1;
       }
     </style>
+
+    <!--  -->
   </head>
   <body>
     <div class="container">
diff --git a/starter/04-CSS-Layouts/index.html b/starter/04-CSS-Layouts/index.html
@@ -25,8 +25,8 @@ <h1>📘 The Code Magazine</h1>
           <!-- <strong>This is the navigation</strong> -->
           <a href="blog.html">Blog</a>
           <a href="#">Challenges</a>
-          <a href="#">Flexbox</a>
-          <a href="#">CSS Grid</a>
+          <a href="./flexbox.html">Flexbox</a>
+          <a href="./css-grid.html">CSS Grid</a>
         </nav>
 
         <!-- <div class="clear"></div> -->
diff --git a/starter/04-CSS-Layouts/style.css b/starter/04-CSS-Layouts/style.css
@@ -2,6 +2,7 @@
   /* border-top: 10px solid #1098ad; */
   margin: 0;
   padding: 0;
+  box-sizing: border-box;
 }
 
 /* PAGE SECTIONS */
@@ -48,10 +49,7 @@ aside {
   background-color: #f7f7f7;
   border-top: 5px solid #1098ad;
   border-bottom: 5px solid #1098ad;
-  /* padding-top: 50px;
-  padding-bottom: 50px; */
-  padding: 50px 0;
-  width: 500px;
+  padding: 50px 40px;
 }
 
 /* SMALLER ELEMENTS */
@@ -82,6 +80,7 @@ h4 {
   font-size: 20px;
   text-transform: uppercase;
   text-align: center;
+  margin-bottom: 40px;
 }
 
 p {
@@ -134,6 +133,7 @@ li:last-child {
 
 .related {
   list-style: none;
+  margin: 0 0;
 }
 
 body {
