举一个弹性盒子处理响应式的例子

假设我们有一个页面，其中包含一个水平导航栏和一个垂直菜单。当页面宽度小于一定值时，我们希望垂直菜单出现在水平导航栏下方而不是旁边。这时候就可以使用弹性盒子（flexbox）来实现响应式布局。

HTML 代码：

<div class="container">
  <nav class="horizontal-nav">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
  <nav class="vertical-nav">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</div>

CSS 代码：

.container {
  display: flex;
  flex-wrap: wrap;
}

.horizontal-nav {
  flex-basis: 100%;
}

.vertical-nav {
  flex-basis: 100%;
}

@media (min-width: 768px) {
  .horizontal-nav {
    flex-basis: auto;
  }
  
  .vertical-nav {
    flex-basis: 25%;
    margin-left: auto;
  }
}

解释：

- `.container` 是一个弹性容器，它的 `flex-wrap` 属性设置为 `wrap`，表示当子元素宽度超过容器宽度时，子元素会自动换行。
- `.horizontal-nav` 和 `.vertical-nav` 是两个子元素，它们的 `flex-basis` 属性设置为 `100%`，表示它们的宽度都等于父容器宽度。
- 在 `@media` 媒体查询中，当页面宽度大于等于 768px 时，`.horizontal-nav` 的 `flex-basis` 属性设置为 `auto`，表示它的宽度会自适应内容宽度；`.vertical-nav` 的 `flex-basis` 属性设置为 `25%`，表示它的宽度为父容器宽度的四分之一，并且将其 `margin-left` 属性设置为 `auto`，表示将其右对齐。这样，当页面宽度大于等于 768px 时，`.horizontal-nav` 和 `.vertical-nav` 就会并排显示；当页面宽度小于 768px 时，`.horizontal-nav` 和 `.vertical-nav` 就会垂直排列。