css集

Flexbox基础布局

/* 水平垂直居中（弹窗/加载动画） */ .center-flex { display: flex; justify-content: center; align-items: center; height: 100vh; } /* 三栏自适应布局 */ .three-column { display: flex; } .sidebar { flex: 0 0 200px; } .main-content { flex: 1; margin: 0 20px; }

flex-direction:column;

让容器内的子元素‌从上到下垂直排列‌，同时将主轴方向改为垂直方向（必须先给父容器设置 display: flex 或 display: inline-flex）

Grid响应式布局

/* 自适应网格（产品展示） */ .grid-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; } /* 复杂区域布局 */ .complex-layout { display: grid; grid-template-areas: "header header header" "sidebar main aside" "footer footer footer"; }