一文精通CSS布局：Flex与Grid完全指南

最新推荐文章于 2025-03-15 17:21:05 发布

AOIWB

最新推荐文章于 2025-03-15 17:21:05 发布

阅读量1.1k

点赞数 21

分类专栏： Web前端全流程文章标签： css css3 前端

本文链接：https://blog.csdn.net/AOIWB/article/details/145848650

版权

Web前端全流程专栏收录该内容

3 篇文章

订阅专栏

在这里插入图片描述

第一部分：布局基础概念

1.1 布局发展简史

表格布局 → 浮动布局 → 定位布局 → Flex布局 → Grid布局
Flex与Grid关系：Flex处理一维布局（横向/纵向），Grid处理二维布局（行列交叉）

1.2 布局基本术语

<!-- 容器 vs 项目 -->
<div class="container">  <!-- 容器 -->
  <div class="item"></div>  <!-- 项目 -->
</div>

<!-- 主轴 vs 交叉轴 -->
Flex主轴方向 → 由flex-direction定义
Grid网格轨道 → 由grid-template-columns/rows定义

第二部分：Flex布局从入门到精通

2.1 容器属性详解

2.1.1 基础设置

.container {
  display: flex; /* 开启Flex布局 */
  background: #f0f0f0;
  padding: 20px;
}

2.1.2 主轴方向控制

.container {
  flex-direction: row;        /* 默认值，水平排列 */
  flex-direction: column;     /* 垂直排列 */
  flex-direction: row-reverse;/* 反向水平 */
}

2.1.3 换行控制

.container {
  flex-wrap: nowrap; /* 默认不换行 */
  flex-wrap: wrap;   /* 换行 */
}

2.1.4 对齐方式

/* 主轴对齐 */
justify-content: flex-start | flex-end | center | space-between | space-around;

/* 交叉轴对齐 */
align-items: stretch | flex-start | flex-end | center | baseline;

/* 多行对齐 */
align-content: stretch | flex-start | flex-end | center | space-between | space-around;

2.2 项目属性详解

2.2.1 基础设置

.item {
  flex: 0 1 auto; /* 默认值 */
  /* flex: <grow> <shrink> <basis> */
}

2.2.2 尺寸控制

.item {
  flex-grow: 2;    /* 放大比例 */
  flex-shrink: 0;  /* 禁止缩小 */
  flex-basis: 200px;/* 初始尺寸 */
}

2.2.3 特殊定位

.item-special {
  order: -1;       /* 显示顺序 */
  align-self: end; /* 独立对齐 */
}

2.3 实战案例：导航栏

<nav class="flex-nav">
  <a href="#">首页</a>
  <a href="#">产品</a>
  <a href="#" class="logo">LOGO</a>
  <a href="#">关于</a>
  <a href="#">联系</a>
</nav>

.flex-nav {
  display: flex;
  gap: 1rem;
  padding: 1rem;
  background: #333;
}

.flex-nav a {
  color: white;
  text-decoration: none;
  padding: 0.5rem 1rem;
}

.logo {
  margin-left: auto; /* 关键技巧 */
  font-weight: bold;
  font-size: 1.2rem;
}

第三部分：Grid布局从零掌握

3.1 容器属性详解

3.1.1 网格定义

.container {
  display: grid;
  grid-template-columns: 200px 1fr 200px; /* 三列布局 */
  grid-template-rows: 100px auto 60px;     /* 三行布局 */
  gap: 20px;                              /* 间距 */
}

3.1.2 轨道定义进阶

.container {
  /* 重复模式 */
  grid-template-columns: repeat(3, 1fr);
  
  /* 自适应轨道 */
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  
  /* 命名网格线 */
  grid-template-columns: [start] 1fr [center] 1fr [end];
}

3.2 项目定位技巧

3.2.1 基础定位

.item {
  grid-column: 1 / 3;   /* 跨越1-3列 */
  grid-row: 2 / span 2; /* 从第2行开始，跨越2行 */
}

3.2.2 命名区域

.container {
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }

3.3 实战案例：响应式相册

<div class="photo-grid">
  <div class="photo"></div>
  <div class="photo wide"></div>
  <div class="photo tall"></div>
  <!-- 更多图片... -->
</div>

.photo-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-auto-rows: 200px;
}

.photo {
  background: #ddd;
  border-radius: 8px;
}

.wide {
  grid-column: span 2;
}

.tall {
  grid-row: span 2;
}

第四部分：布局选择策略

4.1 Flex vs Grid对比

特性	Flex布局	Grid布局
维度	一维	二维
内容驱动	是	否
隐式轨道	无	有
对齐系统	简单	强大
适合场景	导航、表单	仪表盘、卡片网格

4.2 混合使用技巧

/* Grid容器内的Flex项目 */
.grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr;
}

.grid-item {
  display: flex;
  align-items: center;
}

/* Flex容器内的Grid项目 */
.flex-container {
  display: flex;
}

.flex-item {
  display: grid;
  grid-template: 1fr / 1fr;
}

第五部分：常见问题解决方案

5.1 浏览器兼容性

/* Flex兼容写法 */
.container {
  display: -webkit-flex;  /* Safari */
  display: flex;
}

/* Grid兼容方案 */
@supports (display: grid) {
  .container { display: grid; }
}
@supports not (display: grid) {
  .container { display: flex; }
}

5.2 布局调试技巧

/* 调试辅助 */
.debug * {
  outline: 1px solid red !important;
}

/* 网格线显示 */
.container {
  display: grid;
  grid-template-columns: subgrid;
}

第六部分：综合实战项目

6.1 电商首页布局

<div class="layout">
  <header>头部导航</header>
  <aside>侧边筛选</aside>
  <main>
    <div class="product-grid">
      <!-- 商品卡片 -->
    </div>
  </main>
  <footer>底部信息</footer>
</div>

.layout {
  display: grid;
  grid-template:
    "header header" 80px
    "aside  main"   1fr
    "footer footer" 60px
    / 250px 1fr;
  min-height: 100vh;
}

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