6、利用 Flexbox 实现响应式布局

利用 Flexbox 实现响应式布局

1. 响应式布局的背景与目标

前端开发者的一项重要职责是，无论用户使用何种设备或浏览器，都要为其提供最佳体验。在早期的网络发展中，浏览器厂商之间竞争激烈，各自发明非标准特性，导致前端开发者需要针对不同浏览器和屏幕尺寸创建同一页面的多个副本，维护这些副本既耗时又令人沮丧。

如今，浏览器大战已结束，浏览器厂商遵循相同的标准特性，现代前端开发者可以专注于单一代码库。同时，借助如 Flexbox 这样的新技术，无需创建重复文档，布局就能根据用户屏幕尺寸进行调整。

我们将以 Ottergram 为例，把它从简单的图片列表扩展为适合交互内容的用户界面。通过 Flexbox 和 CSS 定位，构建一组界面组件，使其能在浏览器窗口大小变化时调整，同时保持整体布局。最终，Ottergram 将具备滚动的缩略图列表和显示单张大图详情的区域。

2. 扩展界面

自 iPhone 推出以来，通过智能手机而非桌面或笔记本电脑访问互联网的趋势不断增长。对于前端开发者而言，移动优先开发已被证明是最佳设计方法，即先为小屏幕设计，再扩展到平板电脑尺寸屏幕，最后到桌面尺寸设计。

Ottergram 的简单布局已对移动设备友好，能以适合小屏幕的比例显示文本和图像。接下来，我们计划让缩略图列表水平滚动，同时展示大图详情，目前大图详情将位于列表下方。

3. 添加详情图片

首先，在 index.html 中添加代码创建详情图片：

...
      <li class=