# CSS 布局与响应式

## 学习目标
- 掌握 Flexbox 布局
- 学会 Grid 布局
- 理解响应式设计

## Flexbox 布局

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

## Grid 布局

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

## 响应式设计

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

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

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

## 动手练习

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