从初学到精通：Flex与Grid布局全攻略

最新推荐文章于 2026-08-24 13:29:54 发布

原创最新推荐文章于 2026-08-24 13:29:54 发布 · 1.8k 阅读

22 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

Flex布局与Grid布局：从初学到精通

1. 引言

介绍CSS布局的发展历程
Flex布局和Grid布局的诞生背景
两种布局的适用场景和优势

2. Flex布局基础

Flex容器和Flex项目的概念
Flex容器的属性
- display: flex
- flex-direction
- justify-content
- align-items
- flex-wrap
Flex项目的属性
- flex-grow
- flex-shrink
- flex-basis
- align-self

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

.item {
  flex: 1;
}

3. Flex布局进阶

嵌套Flex布局
使用Flex布局实现常见布局模式
- 水平居中
- 垂直居中
- 圣杯布局
Flex布局的响应式设计

.container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  flex: 1 1 200px;
}

4. Grid布局基础

Grid容器和Grid项目的概念
Grid容器的属性
- display: grid
- grid-template-columns
- grid-template-rows
- grid-gap
- justify-items
- align-items
Grid项目的属性
- grid-column
- grid-row
- justify-self
- align-self

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}

.item {
  grid-column: span 2;
}

5. Grid布局进阶

嵌套Grid布局
使用Grid布局实现复杂布局模式
- 网格布局
- 瀑布流布局
- 响应式网格布局
Grid布局的响应式设计

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

6. Flex布局与Grid布局的比较

适用场景对比
性能对比
兼容性对比
如何选择Flex布局和Grid布局

7. 实战案例

使用Flex布局和Grid布局构建一个完整的网页布局
结合Flex布局和Grid布局实现复杂UI组件

<div class="container">
  <div class="header">Header</div>
  <div class="sidebar">Sidebar</div>
  <div class="main">Main Content</div>
  <div class="footer">Footer</div>
</div>

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

.header {
  grid-area: header;
}

.sidebar {
  grid-area: sidebar;
}

.main {
  grid-area: main;
}

.footer {
  grid-area: footer;
}

8. 总结

Flex布局和Grid布局的核心概念回顾
如何在实际项目中灵活运用两种布局
未来CSS布局的发展趋势

9. 参考资料

官方文档链接
推荐阅读的书籍和文章
相关工具和资源

通过以上大纲，读者可以系统地学习Flex布局和Grid布局，从基础到进阶，最终掌握如何在实际项目中灵活运用这两种布局方式。

初识Flex布局

Flex布局是一种一维布局模型，适合在单行或单列中排列元素。它通过设置容器的display: flex属性来启用，子元素可以通过flex-grow、flex-shrink和flex-basis等属性进行灵活调整。

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

.container {
  display: flex;
  justify-content: space-between;
}

.item {
  flex: 1;
  background-color: lightblue;
  margin: 10px;
  padding: 20px;
  text-align: center;
}

初识Grid布局

Grid布局是一种二维布局模型，适合在行和列中排列元素。它通过设置容器的display: grid属性来启用，子元素可以通过grid-template-columns、grid-template-rows等属性进行布局。

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

.container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.item {
  background-color: lightcoral;
  padding: 20px;
  text-align: center;
}

Flex布局进阶

在Flex布局中，可以通过flex-direction属性改变主轴方向，align-items和justify-content属性控制子元素的对齐方式。flex-wrap属性允许子元素换行。

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

Grid布局进阶

在Grid布局中，可以通过grid-template-areas属性定义区域布局，grid-column和grid-row属性控制子元素的位置。grid-auto-flow属性可以改变子元素的排列顺序。

.container {
  display: grid;
  grid-template-areas: 
    "header header"
    "sidebar main"
    "footer footer";
  grid-template-columns: 1fr 3fr;
  grid-template-rows: auto 1fr auto;
}

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

Flex布局与Grid布局的结合使用

在某些复杂布局中，可以结合使用Flex布局和Grid布局。例如，使用Grid布局创建整体结构，使用Flex布局调整内部元素的排列。

<div class="container">
  <div class="header">Header</div>
  <div class="sidebar">Sidebar</div>
  <div class="main">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
  </div>
  <div class="footer">Footer</div>
</div>

.container {
  display: grid;
  grid-template-areas: 
    "header header"
    "sidebar main"
    "footer footer";
  grid-template-columns: 1fr 3fr;
  grid-template-rows: auto 1fr auto;
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { 
  grid-area: main;
  display: flex;
  justify-content: space-around;
}
.footer { grid-area: footer; }

.item {
  background-color: lightgreen;
  padding: 20px;
  text-align: center;
}

实战案例

通过一个完整的网页布局案例，展示如何灵活运用Flex布局和Grid布局。案例包括头部、侧边栏、主内容区和页脚。

<div class="container">
  <header class="header">Header</header>
  <aside class="sidebar">Sidebar</aside>
  <main class="main">
    <section class="content">Content 1</section>
    <section class="content">Content 2</section>
    <section class="content">Content 3</section>
  </main>
  <footer class="footer">Footer</footer>
</div>

.container {
  display: grid;
  grid-template-areas: 
    "header header"
    "sidebar main"
    "footer footer";
  grid-template-columns: 1fr 3fr;
  grid-template-rows: auto 1fr auto;
  height: 100vh;
}

.header { 
  grid-area: header;
  background-color: lightblue;
  padding: 20px;
  text-align: center;
}

.sidebar { 
  grid-area: sidebar;
  background-color: lightcoral;
  padding: 20px;
  text-align: center;
}

.main { 
  grid-area: main;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  background-color: lightgreen;
  padding: 20px;
}

.content {
  background-color: lightyellow;
  padding: 20px;
  margin: 10px;
  text-align: center;
}

.footer { 
  grid-area: footer;
  background-color: lightblue;
  padding: 20px;
  text-align: center;
}