如何用Flexbox/CSS Grid实现指定页面布局？求代码示例

Hey Andrew! 可惜没法看到你提到的附图，但我可以根据常见的布局场景给你分析Flexbox和CSS Grid的适用情况，再给你对应的代码示例，帮你避开繁琐的页面构建器~

• 如果你的布局是单一方向的排列（比如导航栏、横向/纵向的卡片列表），优先选Flexbox。它专注于一维空间的对齐与分布，代码简洁，上手快，适合处理行内或列内元素的间距、对齐问题。
• 如果你的布局是二维网格结构（比如多列多行的卡片墙、页面整体的分栏+分行布局，需要同时控制行高和列宽），CSS Grid是最佳方案。它能直接在容器上定义整个网格的规则，不用嵌套多层容器，布局逻辑更清晰。

当然，复杂场景下也可以结合两者使用：比如用Grid搭建页面的整体框架，内部的局部元素用Flexbox处理一维排列，这样能兼顾两者的优势。

Flexbox 示例（横向自适应卡片列表） #

<div class="flex-card-list">
  <div class="card">卡片内容1</div>
  <div class="card">卡片内容2</div>
  <div class="card">卡片内容3</div>
  <div class="card">卡片内容4</div>
</div>

<style>
.flex-card-list {
  display: flex;
  gap: 1.2rem; /* 卡片之间的间距 */
  flex-wrap: wrap; /* 超出容器宽度自动换行 */
  justify-content: space-around; /* 水平方向均匀分布 */
  padding: 1rem;
}

.card {
  flex: 0 1 280px; /* 不放大、可缩小，基础宽度280px */
  background-color: #f5f5f5;
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
</style>

CSS Grid 示例（页面整体二维布局） #

<div class="page-grid">
  <header class="grid-item">页面头部</header>
  <aside class="grid-item">侧边导航</aside>
  <main class="grid-item">主内容区</main>
  <footer class="grid-item">页面底部</footer>
</div>

<style>
.page-grid {
  display: grid;
  /* 定义网格区域的命名与布局 */
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";
  grid-template-rows: auto 1fr auto; /* 头部/底部高度自适应，主内容占满剩余空间 */
  grid-template-columns: 220px 1fr; /* 侧边栏固定宽度，主内容占剩余宽度 */
  gap: 1rem;
  min-height: 100vh; /* 让布局占满整个视口高度 */
  padding: 0 1rem;
}

.grid-item:nth-child(1) { grid-area: header; background: #e2e8f0; padding: 1rem; }
.grid-item:nth-child(2) { grid-area: sidebar; background: #cbd5e1; padding: 1rem; }
.grid-item:nth-child(3) { grid-area: main; background: #f1f5f9; padding: 1rem; }
.grid-item:nth-child(4) { grid-area: footer; background: #e2e8f0; padding: 1rem; }
</style>

你可以根据自己附图的实际布局结构，选择对应的方案或者组合使用，纯CSS就能实现，完全不用依赖页面构建器~

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