use flex

Author: 张欧文

starter/04-CSS-Layouts/flexbox.html

@@ -9,7 +9,7 @@
       .el--1 {
         background-color: blueviolet;
         align-self: flex-start;
-        order: 2;
+        /* order: 2; */
       }
       .el--2 {
         background-color: orangered;
@@ -27,7 +27,7 @@
       }
       .el--6 {
         background-color: steelblue;
-        order: -1;
+        /* order: -1; */
       }
       .el--7 {
         background-color: yellow;
@@ -39,7 +39,7 @@
       .el {
         /* margin-right: 10px; */
         /* flex-basis: 200px; */
-        flex: 0 0 10px;
+        flex: 1 1 10px;
       }
       .container {
         /* STARTER */
@@ -52,7 +52,7 @@
         display: flex;
         align-items: center;
         justify-content: flex-start;
-        gap: 30px;
+        gap: 0;
       }
     </style>
   </head>
@@ -63,9 +63,9 @@
       <div class="el el--3">CSS</div>
       <div class="el el--4">are</div>
       <div class="el el--5">amazing</div>
-      <div class="el el--6">languages</div>
+      <!-- <div class="el el--6">languages</div>
       <div class="el el--7">to</div>
-      <div class="el el--8">learn</div>
+      <div class="el el--8">learn</div> -->
     </div>
   </body>
 </html>

starter/04-CSS-Layouts/index.html

@@ -36,17 +36,19 @@ <h1>📘 The Code Magazine</h1>
         <header class="post-header">
           <h2>The Basic Language of the Web: HTML</h2>
 
-          <img
-            src="img/laura-jones.jpg"
-            alt="Headshot of Laura Jones"
-            height="50"
-            width="50"
-            class="author-img"
-          />
+          <div class="author-box">
+            <img
+              src="img/laura-jones.jpg"
+              alt="Headshot of Laura Jones"
+              height="50"
+              width="50"
+              class="author-img"
+            />
 
-          <p id="author">
-            Posted by <strong>Laura Jones</strong> on Monday, June 21st 2027
-          </p>
+            <p id="author">
+              Posted by <strong>Laura Jones</strong> on Monday, June 21st 2027
+            </p>
+          </div>
 
           <img
             src="img/post-img.jpg"
@@ -126,35 +128,41 @@ <h3>Why should you learn HTML?</h3>
         <h4>Related posts</h4>
 
         <ul class="related">
-          <li>
+          <li class="related-post">
             <img
               src="img/related-1.jpg"
               alt="Person programming"
               width="75"
               height="75"
             />
-            <a href="#">How to Learn Web Development</a>
-            <p class="related-author">By Jonas Schmedtmann</p>
+            <div>
+              <a class="related-link" href="#">How to Learn Web Development</a>
+              <p class="related-author">By Jonas Schmedtmann</p>
+            </div>
           </li>
-          <li>
+          <li class="related-post">
             <img
               src="img/related-2.jpg"
               alt="Lightning"
               width="75"
               height="75"
             />
-            <a href="#">The Unknown Powers of CSS</a>
-            <p class="related-author">By Jim Dillon</p>
+            <div>
+              <a class="related-link" href="#">The Unknown Powers of CSS</a>
+              <p class="related-author">By Jim Dillon</p>
+            </div>
           </li>
-          <li>
+          <li class="related-post">
             <img
               src="img/related-3.jpg"
               alt="JavaScript code on a screen"
               width="75"
               height="75"
             />
-            <a href="#">Why JavaScript is Awesome</a>
-            <p class="related-author">By Matilda</p>
+            <div>
+              <a class="related-link" href="#">Why JavaScript is Awesome</a>
+              <p class="related-author">By Matilda</p>
+            </div>
           </li>
         </ul>
       </aside>

starter/04-CSS-Layouts/style.css

@@ -198,7 +198,7 @@ nav a:link {
   display: block; */
 
   margin-right: 30px;
-  margin-top: 10px;
+  margin-top: 0;
   display: inline-block;
 }
 
@@ -267,7 +267,7 @@ nav p {
   font-size: 18px;
 } */
 
-/* float */
+/* float 
 .author-img {
   float: left;
 }
@@ -310,3 +310,43 @@ footer {
 .related {
   margin: 0;
 }
+*/
+
+/* flex */
+.main-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.author-box {
+  display: flex;
+  align-items: center;
+  margin-bottom: 15px;
+}
+
+#author {
+  margin: 0 0;
+  margin-left: 15px;
+}
+
+.related-post {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+}
+
+.related-link:link {
+  font-size: 17px;
+  font-weight: bold;
+  font-style: normal;
+  margin-bottom: 5px;
+  display: block;
+}
+
+.related-author {
+  margin-bottom: 0;
+  font-size: 14px;
+  font-weight: normal;
+  font-style: italic;
+}