这些布局方法都是网站制作过程中常用的技术，也是目前前端布局的绝对主流和首选方案。

1. Flexbox（弹性盒子布局）

设计初衷：为一维布局（沿直线或曲线排布）提供更高效、灵活的方式。非常适合组件、导航栏等线性结构的布局。

核心概念：

• 容器：设置了 display: flex; 的元素。

• 项目：容器内的直接子元素。

容器常用属性：

• flex-direction：定义主轴方向（row | row-reverse | column | column-reverse）。

• justify-content：定义项目在主轴上的对齐方式（flex-start | flex-end | center | space-between | space-around | space-evenly）。

• align-items：定义项目在交叉轴上的对齐方式（stretch | flex-start | flex-end | center | baseline）。

• flex-wrap：定义是否换行（nowrap | wrap | wrap-reverse）。

项目常用属性：

• flex-grow：定义项目的放大比例。

• flex-shrink：定义项目的缩小比例。

• flex-basis：定义项目在分配多余空间之前的默认大小。

• align-self：允许单个项目有与其他项目不一样的对齐方式。

.container {  

display: flex;  

justify-content: center; /* 水平居中 */  

align-items: center;     /* 垂直居中 */  

height: 300px;}

.item { flex: 1; } /* 每个项目平均分配空间 */

2. CSS Grid（网格布局）

设计初衷：为二维布局（同时定义行和列）而设计。非常适合整个页面的宏观布局，如杂志、仪表盘等复杂结构。

核心概念：

• 容器：设置了 display: grid; 的元素。

• 项目：容器内的直接子元素。

• 网格线：划分网格的线。

• 轨道：相邻网格线之间的空间（行或列）。

• 单元格：相邻行线和列线相交的区域。

容器常用属性：

• grid-template-columns / grid-template-rows：定义列和行的尺寸。

• grid-template-areas：通过命名区域来定义布局模板。

• gap（或 grid-gap）：设置网格项之间的间距。

• justify-items / align-items：设置网格项在单元格内的水平/垂直对齐方式。

• justify-content / align-content：设置整个网格在容器内的水平/垂直对齐方式。

项目常用属性：

• grid-column-start / grid-column-end / grid-row-start / grid-row-end：指定项目占据的网格区域。

• grid-area：简写属性，或指定项目放在哪个命名区域。

.container {  

display: grid; 

grid-template-columns: 1fr 2fr 1fr; /* 三列，中间列是两侧的两倍 */  

grid-template-rows: 100px auto 100px;  

gap: 10px; 

grid-template-areas:    "header header header"    

"sidebar main ads"   

 "footer footer footer";}

.header { grid-area: header; }

.sidebar { grid-area: sidebar; }

.main { grid-area: main; }

.ads { grid-area: ads; }

.footer { grid-area: footer; }