《Flexbox和Grid对比指南》

原创已于 2025-04-09 23:59:00 修改 · 293 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端

于 2025-04-09 23:54:53 首次发布

学完基础样式却总被布局逼疯？今天带你用Flexbox和Grid两种神技，告别float和position的远古时代！🚀

一、为什么需要布局系统？

传统布局的痛点：

float要清浮动
position容易脱离文档流
响应式适配要写一堆媒体查询

Flexbox和Grid的优势：
✅ 更少的代码实现复杂布局
✅ 天生响应式设计
✅ 浏览器支持率超98%（2024年数据）

二、Flexbox（弹性布局）

1. 核心概念

.container {
  display: flex;           /* 开启Flex魔法 */
  justify-content: center; /* 主轴对齐方式 */
  align-items: stretch;    /* 交叉轴对齐 */
  flex-wrap: wrap;         /* 允许换行 */
}

.item {
  flex: 1;                /* 自动填充剩余空间 */
  order: 2;               /* 调整显示顺序 */
}

2. 经典案例：导航栏

<nav class="flex-nav">
  <div>首页</div>
  <div>产品</div>
  <div class="login">登录</div>
</nav>

.flex-nav {
  display: flex;
  justify-content: space-between;
}
.login {
  margin-left: auto; /* 右对齐妙招 */
}

三、CSS Grid（网格布局）

1. 二维布局之王

.container {
  display: grid;
  grid-template-columns: 100px 1fr 2fr; /* 列定义 */
  grid-template-rows: 80px auto;        /* 行定义 */
  gap: 10px;                            /* 间距 */
}

.item-a {
  grid-column: 1 / 3;  /* 跨1-3列 */
  grid-row: 1;         /* 固定第一行 */
}

2. 实战：圣杯布局

body {
  display: grid;
  grid-template-areas:
    "header header header"
    "nav content sidebar"
    "footer footer footer";
}

header { grid-area: header; }
nav { grid-area: nav; }

四、Flexbox vs Grid 怎么选？

特性	Flexbox	Grid
维度	一维（行或列）	二维（行+列）
最佳场景	组件级布局	整体页面框架
控制粒度	内容驱动	容器驱动
兼容性	IE10+	IE11+

黄金法则：

排列单项内容用Flex（如导航栏、卡片列表）
控制整体框架用Grid（如后台管理系统）

五、避坑指南

别混用：Grid容器里的子项设置float无效

移动端适配：

@media (max-width: 768px) {
  .container { grid-template-columns: 1fr; }
}

调试神器：
Chrome开发者工具 → Elements → 点击display: flex/grid图标

✨ 小技巧：
在VS Code中输入disp然后按Tab，自动补全display: flex/grid！