我对CSS仍然非常陌生，我只是试图理解Flex的基本概念，所以到目前为止，我的代码可能有很多错误，但我愿意学习！！我现在是自学成才的，所以我来这里:)
就像我说的，我还是个初学者，所以请教我！我正在try 将此内容放在侧边栏旁边？ 我知道网格很可能是最好的解决方案，但是在我使用网格之前，我想先用FLEX来做这件事，然后再深入研究这个概念，因为它看起来有点复杂！
以下代码:
html,
body {
background-color: rgb(65, 75, 113);
margin: 0;
padding: 0;
box-sizing: border-box;
}
@font-face {
font-family: "Corben";
src: url(Corben/Corben-Regular.ttf);
}
@font-face {
font-family: "Archivo";
src: url(Archivo_Black/ArchivoBlack-Regular.ttf);
}
@font-face {
font-family: "Outfit";
src: url(Outfit/static/Outfit-Regular.ttf);
}
@font-face {
font-family: "Outfit-black";
src: url(Outfit/static/Outfit-Black.ttf);
}
@font-face {
font-family: "Cormorant-semibold";
src: url(Cormorant/static/Cormorant-SemiBold.ttf);
}
@font-face {
font-family: "Cormorant";
src: url(Cormorant/static/Cormorant-Regular.ttf);
}
.container {
outline: white 1px solid;
height: 100vh;
width: 100vw;
/* get rid of this... or play around w it */
display: flex;
flex-direction: column;
}
.top-header {
/* outline: 1px rgb(255, 0, 0) solid; */
background-color: rgb(43, 38, 111);
width: 100%;
height: 35lvh;
/* how to center text within a div */
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
#heading-text {
font-family: Archivo;
color: white;
font-size: 5vh;
font-weight: 1000;
letter-spacing: 0.5dvh;
/* headers come with margin at the top so get rid of that */
margin-top: 0;
}
#header-pic {
/* outline: 1px blue solid; */
height: 100%;
position: absolute;
right: 0;
}
.sidebar {
height: 100lvh;
width: 150px;
padding-top: 40px;
background-color: rgb(255, 255, 255);
padding: 10px;
font-size: 3lvh;
}
li {
list-style: none;
}
a {
text-decoration: none;
/* border: 1px red solid; */
margin: 10px;
}
.main-body {
outline: 1px deeppink solid;
background-color: bisque;
float: right;
}
.main-body article {
align-items: flex-end;
justify-content: end;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> yyeesss ❀*ੈ✩‧₊ </title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<style></style>
<body>
<div class="container">
<section class="top-header">
<header>
<h1 id="heading-text"> Braaahhhhhh </h1>
</header>
<img id="header-pic" src="cool-pic.jpg" alt="idk some filler i guuueeessss">
</section>
<aside class="sidebar">
<hr>
<ul>
<li>
<a href="#"> Home </a>
</li>
<li>
<a href="#"> About us </a>
</li>
<li>
<a href="#"> Location </a>
</li>
<li>
<a href="#"> Contact us </a>
</li>
</ul>
<hr>
</aside>
<article class="main-body">
<div id="subheader-body">
<h1> This is an article YEAH BABIIEEEE </h1>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sequi accusamus asperiores, velit nihil incidunt tempore odio totam, vitae aliquam perferendis laborum doloremque excepturi ad deleniti aspernatur laudantium, veniam earum placeat. Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis quos illum velit ea minima. Perspiciatis blanditiis, magnam assumenda, culpa maxime sed consequuntur adipisci placeat laudantium deserunt nemo, ipsam reprehenderit at? Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum asperiores dolore ea vel, corporis nesciunt et autem nobis repellendus consequatur earum ad minima, delectus consectetur voluptatibus voluptate eos, reprehenderit iure. </p>
</div>
</article>
</div>
</body>
</html>