现代 CSS 布局技巧

现代 CSS 提供了强大的布局能力，包括 Flexbox、Grid、Container Queries 等。本文将介绍这些现代 CSS 布局技术，帮助你构建响应式和灵活的页面布局。

Flexbox 布局

Flexbox 是一维布局系统，非常适合处理组件内部的布局。

基础概念

.container {
  display: flex;
  flex-direction: row; /* row | row-reverse | column | column-reverse */
  flex-wrap: nowrap; /* nowrap | wrap | wrap-reverse */
  justify-content: flex-start; /* 主轴对齐 */
  align-items: stretch; /* 交叉轴对齐 */
  gap: 1rem; /* 项目间距 */
}

常用布局模式

居中布局

/* 水平垂直居中 */
.center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

等分布局

.equal-width {
  display: flex;
}

.equal-width > * {
  flex: 1; /* 等分剩余空间 */
}

圣杯布局

.holy-grail {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.holy-grail-header,
.holy-grail-footer {
  flex: 0 0 auto;
}

.holy-grail-body {
  display: flex;
  flex: 1;
}

.holy-grail-sidebar {
  flex: 0 0 200px;
}

.holy-grail-main {
  flex: 1;
}

Grid 布局

Grid 是二维布局系统，可以同时处理行和列。

基础概念

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3列等宽 */
  grid-template-rows: auto;
  gap: 1rem;
  grid-auto-flow: row; /* row | column | dense */
}

常用布局模式

12 列网格系统

.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1rem;
}

.col-1 { grid-column: span 1; }
.col-2 { grid-column: span 2; }
.col-3 { grid-column: span 3; }
.col-4 { grid-column: span 4; }
.col-6 { grid-column: span 6; }
.col-12 { grid-column: span 12; }

响应式网格

.responsive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}

复杂布局

.layout {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar main aside"
    "footer footer footer";
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: auto 1fr auto;
  gap: 1rem;
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.aside { grid-area: aside; }
.footer { grid-area: footer; }

Container Queries

Container Queries 允许我们根据容器的尺寸而不是视口尺寸来应用样式。

基础用法

.card-container {
  container-type: inline-size;
  container-name: card;
}

@container card (min-width: 400px) {
  .card {
    display: flex;
    flex-direction: row;
  }
}

@container card (max-width: 399px) {
  .card {
    display: flex;
    flex-direction: column;
  }
}

实际应用

.product-grid {
  container-type: inline-size;
}

.product-card {
  padding: 1rem;
}

@container (min-width: 500px) {
  .product-card {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 1rem;
  }
}

现代布局技巧

Subgrid

Subgrid 允许子网格继承父网格的轨道定义。

.parent-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.child-grid {
  display: grid;
  grid-column: span 3;
  grid-template-columns: subgrid; /* 继承父网格 */
}

CSS Logical Properties

使用逻辑属性使布局更灵活，支持不同文本方向。

/* 物理属性 */
.element {
  margin-left: 1rem;
  margin-right: 1rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

/* 逻辑属性 */
.element {
  margin-inline: 1rem; /* 左右 */
  padding-block: 1rem; /* 上下 */
}

Aspect Ratio

使用 aspect-ratio 保持元素宽高比。

.video-container {
  aspect-ratio: 16 / 9;
  width: 100%;
}

.image {
  aspect-ratio: 1;
  object-fit: cover;
}

Min/Max/Clamp

使用这些函数创建灵活的尺寸。

.responsive-text {
  font-size: clamp(1rem, 2.5vw, 2rem);
}

.flexible-width {
  width: min(100%, 1200px);
  margin: 0 max(1rem, 5vw);
}

响应式设计

移动优先

/* 移动端样式（默认） */
.container {
  padding: 1rem;
}

/* 平板 */
@media (min-width: 768px) {
  .container {
    padding: 2rem;
  }
}

/* 桌面 */
@media (min-width: 1024px) {
  .container {
    padding: 3rem;
    max-width: 1200px;
    margin: 0 auto;
  }
}

使用 CSS 变量

:root {
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 1.5rem;
  --spacing-lg: 2rem;
  --spacing-xl: 3rem;
}

@media (min-width: 768px) {
  :root {
    --spacing-xs: 0.75rem;
    --spacing-sm: 1.5rem;
    --spacing-md: 2rem;
    --spacing-lg: 3rem;
    --spacing-xl: 4rem;
  }
}

.element {
  padding: var(--spacing-md);
}

实用布局示例

卡片网格

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
  padding: 1rem;
}

粘性页脚

.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.content {
  flex: 1;
}

侧边栏布局

.sidebar-layout {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 2rem;
}

@media (max-width: 768px) {
  .sidebar-layout {
    grid-template-columns: 1fr;
  }
  
  .sidebar {
    order: 2;
  }
}

瀑布流布局

.masonry {
  column-count: 3;
  column-gap: 1rem;
}

.masonry-item {
  break-inside: avoid;
  margin-bottom: 1rem;
}

@media (max-width: 768px) {
  .masonry {
    column-count: 1;
  }
}

性能优化

使用 content-visibility

.long-list {
  content-visibility: auto;
  contain-intrinsic-size: 200px;
}

使用 will-change

.animated-element {
  will-change: transform;
  transition: transform 0.3s;
}

浏览器兼容性

特性检测

/* 使用 @supports 检测特性支持 */
@supports (display: grid) {
  .container {
    display: grid;
  }
}

@supports not (display: grid) {
  .container {
    display: flex;
  }
}

最佳实践

1. 选择合适的布局方式：简单一维布局用 Flexbox，复杂二维布局用 Grid
2. 移动优先：从移动端开始设计，逐步增强
3. 使用 Container Queries：根据容器而非视口响应
4. 利用 CSS 变量：提高可维护性
5. 性能考虑：使用 content-visibility 优化长列表
6. 渐进增强：使用 @supports 提供降级方案

总结

现代 CSS 布局技术为我们提供了强大的工具来构建灵活、响应式的布局。Flexbox 适合一维布局，Grid 适合二维布局，Container Queries 让我们能够根据容器尺寸响应。掌握这些技术，结合最佳实践，可以构建出既美观又高效的现代网页布局。

---

← 返回首页