在现代前端开发中，响应式设计已成为不可忽视的重要部分。为了让页面能够在各种设备上良好显示，开发者需要掌握一系列 CSS 布局技巧。CSS 布局方法多种多样，每种方法都具有其独特的优点和应用场景。在本文中，我们将详细介绍七种常用的 CSS 布局方法，并通过实际代码示例来展示如何根据不同的项目需求选择和应用这些方法，实现美观、自适应的页面布局。
一、Flexbox 布局：灵活的容器布局
Flexbox（弹性盒子布局）是 CSS3 中推出的一种布局模型，它允许容器内的元素在一个方向上灵活地分配空间。Flexbox 最适合用于一维布局，解决了传统布局方式中的很多问题。
1.1 Flexbox 基本概念
Flexbox 的核心概念是“容器”和“项目”。在 Flexbox 中，容器内的项目会沿着主轴或交叉轴对齐和分布。常用的 Flexbox 属性有：
display: flex：启用 Flexbox 布局。
flex-direction：设置主轴方向（默认水平，row），还可以设置为 column（垂直方向）。
justify-content：设置主轴上的对齐方式。
align-items：设置交叉轴上的对齐方式。
1.2 实际应用
Item 1
Item 2
Item 3