前端布局实战——Flex+Grid，搞定所有复杂布局场景

布局是前端开发中最基础、最常用的技能，也是新手最容易遇到问题的环节——无论是简单的导航栏居中、列表排列，还是复杂的页面布局、响应式设计，都离不开布局技术。在现代前端开发中，Flex（弹性布局）和Grid（网格布局）是最核心的两种布局方式，替代了传统的float布局和position布局，兼容性更好、使用更灵活，能轻松搞定所有复杂的布局场景。本文将结合实战案例，详细讲解Flex和Grid的核心用法，以及如何结合两者，实现各种复杂的布局需求，帮助你彻底掌握前端布局技巧。

第一部分：Flex弹性布局——一维布局的首选。Flex布局适用于一维布局场景（即要么水平布局，要么垂直布局），如导航栏、列表、按钮组等，核心是通过设置容器的属性，控制子元素的排列方式、对齐方式和分配空间。

核心容器属性（作用于父元素）：1. display: flex; —— 将父元素设置为Flex容器，子元素自动成为Flex项目；2. flex-direction: 控制Flex项目的排列方向，可选值为row（水平排列，默认值）、column（垂直排列）、row-reverse（水平反向排列）、column-reverse（垂直反向排列）；3. justify-content: 控制Flex项目在主轴（水平或垂直方向）上的对齐方式，可选值为flex-start（默认，左对齐/上对齐）、center（居中对齐）、flex-end（右对齐/下对齐）、space-between（两端对齐，项目之间间距相等）、space-around（项目两侧间距相等，整体间距是项目之间间距的2倍）；4. align-items: 控制Flex项目在交叉轴（与主轴垂直的方向）上的对齐方式，可选值为flex-start（上对齐/左对齐）、center（居中对齐）、flex-end（下对齐/右对齐）、stretch（默认，拉伸填满容器）、baseline（基线对齐）；5. flex-wrap: 控制Flex项目是否换行，可选值为nowrap（默认，不换行，项目会被压缩）、wrap（换行）、wrap-reverse（反向换行）。

核心项目属性（作用于子元素）：1. flex: 控制项目的伸缩比例，是flex-grow（放大比例）、flex-shrink（缩小比例）、flex-basis（基础宽度/高度）的简写，默认值为0 1 auto；最常用的取值为flex: 1，代表项目会自动分配剩余空间，平分容器宽度/高度；2. align-self: 单独控制某个项目的交叉轴对齐方式，覆盖容器的align-items属性；3. order: 控制项目的排列顺序，数值越小，排列越靠前，默认值为0。

Flex实战案例：1. 导航栏居中布局：将导航栏容器设置为display: flex; justify-content: center; align-items: center; 即可实现导航栏的水平和垂直居中；2. 列表均匀排列：将列表容器设置为display: flex; justify-content: space-between; flex-wrap: wrap; 即可实现列表项的均匀排列，且超出容器时自动换行；3. 两栏布局（左侧固定，右侧自适应）：左侧项目设置固定宽度（如width: 200px;），右侧项目设置flex: 1; 即可实现右侧自适应容器宽度。

第二部分：Grid网格布局——二维布局的首选。Grid布局适用于二维布局场景（即同时需要水平和垂直布局），如整体页面布局、卡片布局、表单布局等，核心是将容器划分为行和列，然后将子元素放置到指定的行和列中，实现精准的布局控制。

核心容器属性（作用于父元素）：1. display: grid; —— 将父元素设置为Grid容器，子元素自动成为Grid项目；2. grid-template-columns: 控制Grid容器的列数和每列的宽度，如grid-template-columns: 200px 1fr 1fr; 表示容器分为3列，第一列宽度为200px，第二列和第三列自适应平分剩余空间；还可以使用repeat函数简化写法，如grid-template-columns: repeat(3, 1fr); 表示容器分为3列，每列宽度相等；3. grid-template-rows: 控制Grid容器的行数和每行的高度，用法与grid-template-columns类似；4. grid-gap（或gap）: 控制Grid项目之间的间距，包括水平间距和垂直间距，如gap: 20px; 表示项目之间的间距为20px；5. justify-items: 控制Grid项目在单元格中的水平对齐方式，align-items: 控制Grid项目在单元格中的垂直对齐方式，用法与Flex布局类似。

核心项目属性（作用于子元素）：1. grid-column: 控制项目占据的列数，如grid-column: 1 / 3; 表示项目从第1列开始，占据到第3列（即占据2列）；简写为grid-column: span 2; 表示项目占据2列；2. grid-row: 控制项目占据的行数，用法与grid-column类似；3. grid-area: 用于指定项目所在的区域，结合grid-template-areas属性，可以更直观地控制项目的位置。

Grid实战案例：1. 三栏布局（左中右三栏，中间自适应）：将容器设置为display: grid; grid-template-columns: 200px 1fr 200px; gap: 20px; 即可实现左中右三栏布局，中间栏自适应；2. 卡片网格布局：将容器设置为display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; 即可实现响应式卡片布局，卡片宽度最小为250px，超出容器时自动换行，且平分剩余空间；3. 整体页面布局（头部、导航、内容、底部）：使用grid-template-areas划分区域，头部占据第一行，导航占据第二行左侧，内容占据第二行右侧，底部占据第三行，实现精准的页面布局。

实战小贴士：Flex布局适用于一维布局，Grid布局适用于二维布局，实际开发中，可结合两者使用（如在Grid容器中嵌套Flex容器），实现更复杂的布局需求。同时，要注意浏览器兼容性，Flex和Grid在现代浏览器中都有良好的兼容性，但一些旧版本浏览器（如IE11）对Grid的支持较差，需根据项目需求进行兼容性处理。此外，布局开发时，建议先搭建整体布局框架，再逐步细化内部元素的布局，避免出现布局错乱的问题。