Beginning work on Flexbox

Author: devmodo

wip/04-CSS-Layouts/flexbox.html

@@ -6,8 +6,11 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Flexbox</title>
     <style>
+        
       .el--1 {
         background-color: blueviolet;
+        align-self: flex-start;
+        order: 2;
       }
       .el--2 {
         background-color: orangered;
@@ -18,12 +21,15 @@
       }
       .el--4 {
         background-color: goldenrod;
+        align-self: flex-end;
       }
       .el--5 {
         background-color: palevioletred;
+        order: 1; /*moves items to the end.*/
       }
       .el--6 {
         background-color: steelblue;
+        order: -1; /*moves items to the beginning of the list; all default to zero.*/
       }
       .el--7 {
         background-color: yellow;
@@ -36,10 +42,15 @@
         /* STARTER */
         font-family: sans-serif;
         background-color: #ddd;
-        font-size: 40px;
+        font-size: 34px;
         margin: 40px;
 
         /* FLEXBOX */
+        display: flex;
+        align-items: center;
+        /*A flex container will be as tall as the tallest element in it.*/
+        justify-content: flex-start;
+        gap: 30px;
       }
     </style>
   </head>

wip/04-CSS-Layouts/index.html

@@ -25,13 +25,13 @@ <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>
       </header>
 
       <article>
-        <header class="post-header">
+        <header class="post-header clearfix">
           <h2>The Basic Language of the Web: HTML</h2>
 
           <img

wip/04-CSS-Layouts/style.css

@@ -1,7 +1,8 @@
+/**/
 * {
-  /* border-top: 10px solid #1098ad; */
   margin: 0;
   padding: 0;
+  box-sizing: border-box;
 }
 
 /* PAGE SECTIONS */
@@ -14,7 +15,7 @@ body {
 }
 
 .container {
-  width: 800px;
+  width: 1200px;
   /* margin-left: auto;
   margin-right: auto; */
   margin: 0 auto;
@@ -48,10 +49,8 @@ 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;
+  box-sizing: border-box;
 }
 
 /* SMALLER ELEMENTS */
@@ -82,6 +81,7 @@ h4 {
   font-size: 20px;
   text-transform: uppercase;
   text-align: center;
+  margin-bottom: 30px;
 }
 
 p {
@@ -134,6 +134,7 @@ li:last-child {
 
 .related {
   list-style: none;
+  margin: 0;
 }
 
 body {
@@ -265,3 +266,26 @@ footer p {
 nav p {
   font-size: 18px;
 } */
+
+.clearfix::after {
+    clear: both;
+    content: "";
+    display: block;
+}
+
+article {
+    background-color: green;
+    width: 70%;
+    float: left;
+}
+
+aside {
+    background-color: red;
+    width: 25%;
+    float: right;
+}
+
+footer {
+    background-color: yellow;
+    clear: both;
+}