styling flexbox

Author: Abernachy

projectfolder/css/style.css

@@ -8,7 +8,7 @@
 body {
 	border-top: 5px solid #1098ad;
 	color: #444;
-	font-family: sans-serif;
+	font-family: poppins;
 	position: relative;
 }
 
@@ -176,7 +176,6 @@ nav a:link {
 	padding: 20px;
 	display: block; */
 	margin-right: 30px;
-	margin-top: 10px;
 	display: inline-block;
 }
 
@@ -250,7 +249,7 @@ h2::after {
 	right: -25px;
 }
 
-/* Floats */
+/* Floats
 
 .author-img {
 	float: left;
@@ -291,4 +290,20 @@ aside {
 }
 footer {
 	clear: both;
+} */
+
+/* Flex box */
+.main-header {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+}
+
+.author-box {
+	display: flex;
+	align-items: center;
+}
+.author {
+	margin-bottom: 0px;
+	margin-left: 15px;
 }

projectfolder/index.html

@@ -36,17 +36,20 @@ <h1>📘 The Code Magazine</h1>
 			<article>
 				<header class="post-header">
 					<h2>The Basic Langauge of The Web: HTML</h2>
-					<img
-						src="./imgs/laura-jones.jpg"
-						alt="the person who wrote this"
-						width="50"
-						height="50"
-						class="author-img"
-					/>
-					<p id="author" class="author">
-						Posted by <strong>Laura Jones </strong> on Monday, June 21st 2027
-					</p>
-					<br />
+
+					<div class="author-box">
+						<img
+							src="./imgs/laura-jones.jpg"
+							alt="the person who wrote this"
+							width="50"
+							height="50"
+							class="author-img"
+						/>
+						<p id="author" class="author">
+							Posted by <strong>Laura Jones </strong> on Monday, June 21st 2027
+						</p>
+						<br />
+					</div>
 
 					<img
 						class="post-img"
@@ -119,35 +122,35 @@ <h3>Why should you learn HTML</h3>
 			<aside class="related-aside">
 				<h4><strong>Related Posts</strong></h4>
 				<ul class="related-list">
-					<li>
+					<li class="related-post">
 						<img
 							src="imgs/related-1.jpg"
 							alt="How to Learn Web Development"
 							height="50"
 							width="50"
 						/>
-						<a href="#"> How to Learn Web Development</a>
+						<a href="#" class="related-links"> How to Learn Web Development</a>
 						<p class="related-author">By Jonas Schmeltmann</p>
 					</li>
 
-					<li>
+					<li clas="related-post">
 						<img
 							src="imgs/related-2.jpg"
 							alt="Unknown Power of CSS"
 							height="50"
 							width="50"
 						/>
-						<a href="#"> The Uknown Power of CSS</a>
+						<a href="#" class="related-links"> The Uknown Power of CSS</a>
 						<p class="related-author">By Jonas Schmeltmann</p>
 					</li>
-					<li>
+					<li class="related-post">
 						<img
 							src="imgs/related-3.jpg"
 							alt="Why Javascript is Awsome"
 							height="50"
 							width="50"
 						/>
-						<a href="#"> Why Javascript is Awsome</a>
+						<a href="#" class="related-links"> Why Javascript is Awsome</a>
 						<p class="related-author">By Jonas Schmeltmann</p>
 					</li>
 				</ul>

projectfolder/pages/flexbox.html

@@ -41,9 +41,34 @@
 
 				/* FLEXBOX */
 				display: flex;
-				align-items: stretch;
 				align-items: center;
-				justify-content: space-between;
+				justify-content: flex-start;
+			}
+			.el {
+				/* DEFAULTS 
+				
+				flex-grow: 0;
+				flex-shrink: 1;
+				flex-basis: auto;
+				*/
+				/* flex-basis: 200px; */
+				/* flex-shrink: 0;
+				/* flex-grow: 1;  */
+				/* flex: 0 0 200px; */
+				flex: 1;
+			}
+
+			.el--1 {
+				align-self: flex-start;
+				/* flex-grow: 1; */
+			}
+
+			.el--5 {
+				align-self: stretch;
+			}
+
+			.el--6 {
+				order: -1;
 			}
 		</style>
 	</head>
@@ -54,9 +79,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>