CSS Grid与Flexbox深度解析：现代网页布局实战指南 – 前端开发必备技能

CSS布局演进简史

从最初的表格布局到浮动布局，再到定位布局，CSS一直在演进。如今，Flexbox和Grid布局已成为现代网页设计的标准，它们提供了更强大、更直观的布局能力。

传统布局方式的局限性

• 表格布局：语义不正确，难以维护
• 浮动布局：清除浮动复杂，布局脆弱
• 定位布局：脱离文档流，不适合整体布局

现代布局解决方案

• Flexbox：一维布局解决方案，适合组件和小规模布局
• CSS Grid：二维布局系统，适合整体页面布局
• 两者结合使用可以解决几乎所有布局需求

Flexbox布局详解

Flexbox（弹性盒子布局）是为一维布局设计的，非常适合处理元素在一个方向上的排列、对齐和分布。

Flex容器属性

.container {
  display: flex; /* 定义flex容器 */
  flex-direction: row; /* 主轴方向：row, row-reverse, column, column-reverse */
  flex-wrap: nowrap; /* 是否换行：nowrap, wrap, wrap-reverse */
  justify-content: flex-start; /* 主轴对齐：flex-start, flex-end, center, space-between, space-around, space-evenly */
  align-items: stretch; /* 交叉轴对齐：stretch, flex-start, flex-end, center, baseline */
  align-content: stretch; /* 多行对齐：stretch, flex-start, flex-end, center, space-between, space-around */
}
                    

Flex项目属性

.item {
  order: 0; /* 项目排列顺序 */
  flex-grow: 0; /* 放大比例 */
  flex-shrink: 1; /* 缩小比例 */
  flex-basis: auto; /* 项目初始大小 */
  flex: 0 1 auto; /* 缩写：grow, shrink, basis */
  align-self: auto; /* 单独对齐方式：auto, flex-start, flex-end, center, baseline, stretch */
}
                    

Flexbox实战：导航菜单

<nav style="display: flex; justify-content: space-between; padding: 1rem; background: #f5f5f5;">
  <div style="display: flex;">
    <a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  style="margin: 0 1rem;">首页</a>
    <a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  style="margin: 0 1rem;">产品</a>
    <a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  style="margin: 0 1rem;">服务</a>
    <a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  style="margin: 0 1rem;">关于我们</a>
  </div>
  <div>
    <a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  style="margin: 0 1rem;">登录</a>
    <a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  style="margin: 0 1rem; background: #0066cc; color: white; padding: 0.5rem 1rem; border-radius: 3px;">注册</a>
  </div>
</nav>
                    

CSS Grid布局详解

CSS Grid是一个二维布局系统，专门为解决整体页面布局而设计。它允许我们同时控制行和列，创建复杂的布局结构。

Grid容器属性

.container {
  display: grid; /* 定义grid容器 */
  grid-template-columns: 100px 1fr 2fr; /* 定义列：固定值, fr单位, repeat(), minmax() */
  grid-template-rows: 100px auto 200px; /* 定义行 */
  grid-template-areas: 
    "header header header"
    "sidebar main main"
    "footer footer footer"; /* 定义区域 */
  gap: 10px; /* 网格间隙：row-gap, column-gap */
  justify-items: stretch; /* 单元格水平对齐：start, end, center, stretch */
  align-items: stretch; /* 单元格垂直对齐：start, end, center, stretch */
  justify-content: start; /* 网格水平对齐：start, end, center, stretch, space-around, space-between, space-evenly */
  align-content: start; /* 网格垂直对齐：start, end, center, stretch, space-around, space-between, space-evenly */
}
                    

Grid项目属性

.item {
  grid-column-start: 1; /* 列开始线 */
  grid-column-end: 3; /* 列结束线 */
  grid-row-start: 1; /* 行开始线 */
  grid-row-end: 2; /* 行结束线 */
  grid-column: 1 / 3; /* 缩写：start-line / end-line */
  grid-row: 1 / 2; /* 缩写：start-line / end-line */
  grid-area: header; /* 指定区域名称 */
  justify-self: stretch; /* 单个项目水平对齐：start, end, center, stretch */
  align-self: stretch; /* 单个项目垂直对齐：start, end, center, stretch */
}
                    

Grid实战：网页布局