如何使用Flex布局实现内容与侧边栏并排？

关键问题分析 #

1. .container设置了flex-direction: column，导致所有子元素（顶部header、侧边栏、主内容）垂直排列，这是侧边栏和主内容无法并排的核心原因。
2. 侧边栏高度设为100lvh，会超出容器范围（容器本身是100vh，顶部header已占35lvh）。
3. 主内容使用float: right，但Flex布局不需要float，应通过Flex属性控制布局。

修改后的代码 #

CSS

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;
  min-height: 100vh; /* 改为最小高度，避免内容溢出被截断 */
  width: 100vw;
  display: flex;
  flex-direction: column; /* 保持顶部header垂直排列 */
}

/* 新增：包裹侧边栏和主内容的容器，设置flex实现并排 */
.content-wrapper {
  display: flex;
  flex: 1; /* 占据容器剩余高度 */
}

.top-header {
  background-color: rgb(43, 38, 111);
  width: 100%;
  height: 35lvh;
  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;
  margin-top: 0;
}

#header-pic {
  height: 100%;
  position: absolute;
  right: 0;
}

.sidebar {
  flex: 0 0 150px; /* 固定宽度，不伸缩 */
  background-color: rgb(255, 255, 255);
  padding: 40px 10px 10px; /* 调整内边距，保留顶部40px间距 */
  font-size: 3lvh;
}

li {
  list-style: none;
}

a {
  text-decoration: none;
  margin: 10px;
}

.main-body {
  outline: 1px deeppink solid;
  background-color: bisque;
  flex: 1; /* 占据剩余所有空间 */
  padding: 10px; /* 可选：添加内边距，避免内容贴边 */
}

HTML

<!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>
  <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>
      <!-- 新增：用content-wrapper包裹侧边栏和主内容 -->
      <div class="content-wrapper">
        <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>
    </div>
  </body>
</html>

核心修改说明 #

1. 新增.content-wrapper：将侧边栏和主内容放入该容器，设置display: flex实现水平并排。
2. 调整.container高度：改为min-height: 100vh，当内容超过屏幕高度时容器自动扩展，避免内容被截断。
3. 侧边栏设置flex: 0 0 150px：固定宽度150px，不被压缩或拉伸，高度自适应父容器。
4. 主内容设置flex: 1：自动占据.content-wrapper剩余空间，实现侧边栏固定、主内容自适应的布局。
5. 移除主内容的float: right：Flex布局下无需float，用Flex属性控制更可靠。

内容的提问来源于stack exchange，提问作者Reese