前端布局入门：flex、grid 及其他常用布局

文章目录

• 前言
• [一、flex 布局：灵活的一维布局神器​](#一、flex 布局：灵活的一维布局神器)
• • [1. 核心概念​](#1. 核心概念)
  • [2. 常用属性​](#2. 常用属性)
• [二、grid 布局：强大的二维布局工具​](#二、grid 布局：强大的二维布局工具)
• • [1. 核心概念​](#1. 核心概念)
  • [2. 常用属性​](#2. 常用属性)
• 三、其他常用布局方式​
• • [1. 流式布局（Flow Layout）​](#1. 流式布局（Flow Layout）)
  • [2. 浮动布局（Float Layout）​](#2. 浮动布局（Float Layout）)
  • [3. 定位布局（Position Layout）​](#3. 定位布局（Position Layout）)
• 总结

---

前言

在前端开发中，页面布局就像建筑的骨架，直接决定了页面的呈现效果和用户体验。无论是简单的文字排版，还是复杂的多模块交互界面，都离不开合适的布局方案。今天，我们就来深入探讨前端领域中常用的 flex 布局、grid 布局，以及其他经典布局方式，帮你轻松搞定页面布局难题。

---

一、flex 布局：灵活的一维布局神器​

flex 布局（弹性布局）是 CSS3 中引入的一种一维布局模型，它能让容器中的子元素在水平或垂直方向上灵活排列，轻松应对各种自适应场景。​

1. 核心概念​

容器 ：应用了display: flex或display: inline-flex的元素，它的子元素会自动成为 flex 项目。​
项目 ：容器的直接子元素，受容器的 flex 属性控制。​
主轴 ：项目排列的主要方向，默认是水平方向（从左到右），可通过flex-direction修改。​
交叉轴：与主轴垂直的方向，默认是垂直方向（从上到下），主轴方向改变时，交叉轴也会随之变化。​

2. 常用属性​

容器属性​

• flex-direction：控制主轴方向，取值有row（默认，水平从左到右）、row-reverse（水平从右到左）、column（垂直从上到下）、column-reverse（垂直从下到上）。
• justify-content：控制项目在主轴上的对齐方式，常用取值有flex-start（默认，靠主轴起点对齐）、flex-end（靠主轴终点对齐）、center（居中对齐）、space-between（两端对齐，项目间间距相等）、space-around（项目两侧间距相等，整体两端间距是中间间距的一半）。
• align-items：控制项目在交叉轴上的对齐方式，常用取值有flex-start（靠交叉轴起点对齐）、flex-end（靠交叉轴终点对齐）、center（居中对齐）、stretch（默认，项目高度拉伸至与容器一致，需项目无固定高度）、baseline（按项目内文字基线对齐）。
• flex-wrap：控制项目是否换行，取值有nowrap（默认，不换行，项目可能被压缩）、wrap（换行，新行在下方）、wrap-reverse（换行，新行在上方）。
• align-content：当项目换行后，控制多行项目在交叉轴上的整体对齐方式，用法与justify-content类似，仅在项目换行时生效。

项目属性​

• flex-grow：控制项目的放大比例，默认值为 0（不放大），若所有项目该值都为 1，则它们会平分容器剩余空间；若某项目值为 2，其他为 1，则该项目占有的剩余空间是其他项目的 2 倍。
• flex-shrink：控制项目的缩小比例，默认值为 1（空间不足时缩小），若值为 0，则项目不会被缩小。
• flex-basis：设置项目在主轴上的初始尺寸，默认值为auto（项目自身尺寸），可设具体数值（如200px）。
• flex：flex-grow、flex-shrink、flex-basis的简写，默认值为0 1 auto，常用取值如1（等价于1 1 auto）、auto（等价于1 1 auto）、none（等价于0 0 auto）。
• align-self：单独控制某个项目在交叉轴上的对齐方式，取值与align-items一致，会覆盖容器的align-items属性。

二、grid 布局：强大的二维布局工具​

grid 布局（网格布局）同样是 CSS3 的新特性，它是一种二维布局模型，能同时处理行和列，适合构建复杂的、不规则的页面布局，比如仪表盘、卡片矩阵等。​

1. 核心概念​

容器 ：应用了display: grid或display: inline-grid的元素。​
项目 ：容器的直接子元素。​
网格线 ：构成网格的线条，分为水平网格线（行线）和垂直网格线（列线），用于划分行和列。​
网格轨道 ：两条相邻网格线之间的区域，即行或列，可通过grid-template-rows和grid-template-columns设置轨道尺寸。​
网格单元格 ：行和列交叉形成的最小单位，类似表格的单元格。​
网格区域：由多个网格单元格组成的矩形区域，可通过grid-area命名并用于布局。​

2. 常用属性​

容器属性​

• grid-template-rows：定义网格的行轨道尺寸，如grid-template-rows: 100px 200px表示创建两行，第一行高 100px，第二行高 200px；也可使用fr单位（分数单位）分配剩余空间，如grid-template-rows: 1fr 2fr表示两行按 1:2 的比例分配容器高度。
• grid-template-columns：定义网格的列轨道尺寸，用法与grid-template-rows一致，如grid-template-columns: 150px 1fr 1fr表示创建三列，第一列宽 150px，后两列各占剩余空间的一半。
• grid-gap（已废弃，推荐用gap）：设置网格单元格之间的间距，包括row-gap（行间距）和column-gap（列间距），简写形式gap: 10px 20px表示行间距 10px，列间距 20px，若只写一个值，则行、列间距相同。
• justify-items：控制项目在水平方向（单元格内）的对齐方式，取值有stretch（默认，拉伸填满单元格）、start（靠单元格左侧对齐）、center（水平居中）、end（靠单元格右侧对齐）。
• align-items：控制项目在垂直方向（单元格内）的对齐方式，取值与justify-items一致。
• grid-template-areas：通过命名网格区域来布局，需配合项目的grid-area属性使用。

项目属性​

• grid-row：控制项目占据的行范围，如grid-row: 1 / 3表示项目从第 1 条行线到第 3 条行线，即占据第一、二两行。
• grid-column：控制项目占据的列范围，用法与grid-row一致，如grid-column: 2 / 4表示项目从第 2 条列线到第 4 条列线，占据第二、三两列。
• grid-area：既可以给项目命名（配合容器的grid-template-areas），也可以直接指定项目的位置，如grid-area: 1 / 1 / 2 / 4等价于grid-row: 1 / 2且grid-column: 1 / 4。

三、其他常用布局方式​

除了 flex 和 grid 这两种现代布局，在前端发展过程中，还出现过许多经典的布局方式，它们在特定场景下仍有广泛应用。

1. 流式布局（Flow Layout）​

流式布局是浏览器默认的布局方式，也叫文档流布局。元素按照其在 HTML 中的先后顺序自然排列，块级元素（如div、p）独占一行，自上而下排列；行内元素（如span、a）在同一行内从左到右排列，超出一行后自动换行。​
特点 ：​

布局简单，无需额外设置 CSS，符合正常的阅读习惯。​

自适应能力较弱，当屏幕尺寸变化时，元素尺寸可能会出现不合理的拉伸或挤压，需配合width: 100%、max-width等属性优化。​

适用场景：简单的文档排版，如文章页面、博客内容区等。​

2. 浮动布局（Float Layout）​

浮动布局是早期实现多列布局的常用方案，通过float属性让元素脱离文档流，向指定方向（左或右）浮动，直到碰到父容器边缘或其他浮动元素。​
核心属性 ：​

float：取值为left（向左浮动）、right（向右浮动）、none（默认，不浮动）。​
清除浮动：浮动元素会脱离文档流，可能导致父容器高度塌陷，需通过以下方式清除浮动：​

• 给父容器添加overflow: hidden（触发 BFC，让父容器包裹浮动元素）。
• 使用伪元素清除浮动：

.clearfix::after {​
  content: "";​
  display: block;​
  clear: both;​
}​

• 给父容器添加clearfix类即可。

特点 ：​

能实现简单的多列布局，如左图右文、两列 / 三列布局。​

布局逻辑较复杂，容易出现浮动重叠、父容器塌陷等问题，维护成本高。​

适用场景：图文混排、简单的多列布局（现代开发中已逐渐被 flex/grid 替代）。​

3. 定位布局（Position Layout）​

定位布局通过position属性控制元素的位置，让元素脱离正常文档流（除static和relative的部分情况外），可以精确控制元素在页面中的位置。​
核心属性：​

• position：
  • static：默认值，元素遵循正常文档流，不接受top、right、bottom、left和z-index属性。
  • relative：相对定位，元素仍在文档流中，其位置相对于自身正常位置偏移（通过top、right等属性控制），不影响其他元素布局。
  • absolute：绝对定位，元素脱离文档流，其位置相对于最近的已定位（非static）祖先元素偏移，若没有则相对于浏览器窗口。
  • fixed：固定定位，元素脱离文档流，其位置相对于浏览器窗口固定，滚动页面时元素位置不变，常用于导航栏、回到顶部按钮。
  • sticky：粘性定位，元素在滚动过程中，当到达指定位置时（通过top等属性设置），会固定在该位置，兼具relative和fixed的特性，常用于列表头部吸附。

特点 ：​

能精确控制元素位置，适合实现特殊的 UI 效果。​

元素脱离文档流后可能会覆盖其他元素，需合理使用z-index控制层级，且不利于整体布局的自适应。​

适用场景：弹窗、下拉菜单、回到顶部按钮、固定导航栏等。

---

总结

选择建议：​

• 若需实现简单的单行列布局（如导航栏、列表），优先使用 flex 布局，代码更简洁。
• 若需实现复杂的多行列布局（如卡片矩阵、仪表盘），优先使用 grid 布局，能大幅减少代码量。
• 若需兼容极低版本浏览器（如 IE8 及以下），可考虑流式布局或浮动布局，但需注意兼容性问题。
• 若需实现元素固定位置或特殊偏移效果（如弹窗、回到顶部），使用定位布局，并合理控制层级。

在实际开发中，不必局限于某一种布局方式，可根据具体场景灵活组合使用。