chunyu_project/media/learn/courses/13/chapters/54.md

CSS 布局与响应式

学习目标

• 掌握 Flexbox 布局
• 学会 Grid 布局
• 理解响应式设计

Flexbox 布局

.container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

Grid 布局

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

响应式设计

/* 移动端优先 */
.box { width: 100%; }

/* 平板 */
@media (min-width: 768px) {
    .box { width: 50%; }
}

/* 桌面 */
@media (min-width: 1024px) {
    .box { width: 33.33%; }
}

动手练习

1. 使用 Flexbox 实现导航栏
2. 使用 Grid 实现图片画廊
3. 制作响应式登录页面