CSS现代布局技术完全指南

CSS布局技术经历了从浮动到Flexbox再到Grid的演进。本文将帮你掌握现代CSS布局的核心技术。

🎯 Flexbox布局

基础概念

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.item {
  flex: 1 1 200px; /* flex-grow flex-shrink flex-basis */
}

实战案例：响应式卡片

.card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.card {
  flex: 1 1 300px;
  max-width: 400px;
}

🎪 CSS Grid布局

Grid基础

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

命名网格线

.grid {
  display: grid;
  grid-template-columns: 
    [sidebar-start] 200px 
    [sidebar-end main-start] 1fr 
    [main-end];
  grid-template-rows: 
    [header-start] 60px 
    [header-end content-start] 1fr 
    [content-end];
}

🚀 Subgrid进阶

Subgrid使用场景

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

.child-grid {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / -1;
}

🎨 响应式布局

容器查询

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

现代响应式单位

:root {
  --container-width: clamp(300px, 80vw, 1200px);
}

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

📊 布局选择指南

场景	推荐方案	原因
一维布局	Flexbox	简单直观
二维布局	Grid	强大灵活
嵌套布局	Subgrid	保持一致性
未知内容	auto-fit	自适应调整

总结

现代CSS布局技术让复杂布局变得简单直观，掌握这些技术将显著提升你的前端开发效率。