2025年10月25日
设计初衷：为一维布局（沿直线或曲线排布）提供更高效、灵活的方式。非常适合组件、导航栏等线性结构的布局。
核心概念：
容器：设置了 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; } /* 每个项目平均分配空间 */
设计初衷：为二维布局（同时定义行和列）而设计。非常适合整个页面的宏观布局，如杂志、仪表盘等复杂结构。
容器：设置了 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：简写属性，或指定项目放在哪个命名区域。
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; }