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; }

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"; }

flex-direction:column;

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