如何将内容从侧边栏下方移至其右侧？（Flexbox圣杯布局）

核心修复点 #

• HTML结构调整：.cards容器原本在.container外部，因body设置flex-direction: column导致两者垂直堆叠。需将.cards移入.container，与.sidebar同级，让它们在水平flex容器内并排显示。
• CSS优化：
  • 移除.sidebar固定高度height: calc(100vh - 72px)，由flex容器自动填充中间区域高度
  • 给.container添加flex: 1，确保它占据header和footer之间的剩余空间
  • 移除.cards固定宽度width: 1000px，改为flex: 1自适应剩余宽度
  • 修正.cards的flex-direction为row（无需反向排列）

修正后的完整代码 #

HTML

<div class="header">
  MY AWESOME WEBSITE
</div>

<div class="container">
  <div class="sidebar">
    <ul>
      <li><a href="#">⭐ - link one</a></li>
      <li><a href="#">🦸🏽‍♂️ - link two</a></li>
      <li><a href="#">🖌️ - link three</a></li>
      <li><a href="#">👌🏽 - link four</a></li>
    </ul>
  </div>
  <div class="cards">
    <div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora, eveniet? Dolorem dignissimos maiores non delectus possimus dolor nulla repudiandae vitae provident quae, obcaecati ipsam unde impedit corrupti veritatis minima porro?</div>
    <div class="card">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quasi quaerat qui iure ipsam maiores velit tempora, deleniti nesciunt fuga suscipit alias vero rem, corporis officia totam saepe excepturi odit ea.</div>
    <div class="card">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis illo ex quas, commodi eligendi aliquam ut, dolor, atque aliquid iure nulla. Laudantium optio accusantium quaerat fugiat, natus officia esse autem?</div>
    <div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus nihil impedit eius amet adipisci dolorum vel nostrum sit excepturi corporis tenetur cum, dolore incidunt blanditiis. Unde earum minima laboriosam eos!</div>
    <div class="card">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis illo ex quas, commodi eligendi aliquam ut, dolor, atque aliquid iure nulla. Laudantium optio accusantium quaerat fugiat, natus officia esse autem?</div>
    <div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus nihil impedit eius amet adipisci dolorum vel nostrum sit excepturi corporis tenetur cum, dolore incidunt blanditiis. Unde earum minima laboriosam eos!</div>
  </div>
</div>

<div class="footer">
  The Odin Project ❤️
</div>

CSS

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.header {
  height: 72px;
  background: darkmagenta;
  color: white;
  font-size: 32px;
  font-weight: 900;
  align-items: center;
  display: flex;
  text-indent: 16px;
}

.footer {
  height: 72px;
  background: #eee;
  color: darkmagenta;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sidebar {
  width: 300px;
  background: royalblue;
  min-width: 300px;
  flex-direction: column;
  gap: 50px;
  padding: 16px;
}

.sidebar ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar a {
  color: white;
  text-decoration: none;
  font-size: 24px;
}

.container {
  display: flex;
  flex: 1;
}

.card {
  border: 1px solid #eee;
  box-shadow: 2px 4px 16px rgba(0, 0, 0, .06);
  border-radius: 4px;
  flex: 1 1 250px;
  padding: 16px;
}

.cards {
  padding: 32px;
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  flex: 1;
}

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