简述弹性盒子 flex 布局及 rem 布局？

弹性盒子（Flexbox）布局是一种用于页面布局的新模式，它可以使容器中的子元素能够以弹性的方式进行布局和对齐。Flexbox 布局的主要思想是让容器有能力改变子元素的宽度、高度和顺序，以最佳方式填充可用空间。Flexbox 布局的优点是可以轻松实现响应式布局，适应不同屏幕尺寸的设备。

Rem 布局是一种相对于根元素字体大小的单位，它可以使页面元素的大小和间距随着根元素字体大小的改变而自适应调整。Rem 布局的主要思想是先按照设计稿的尺寸进行设计，然后将设计稿中的像素值转换为 Rem 值，最终通过 JavaScript 动态设置根元素的字体大小来实现自适应布局。

以下是一个使用 Flexbox 布局和 Rem 布局的示例代码：

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.item {
  width: 30%;
  margin-bottom: 1rem;
}

上面的代码中，`.container` 是一个 Flexbox 容器，`.item` 是容器中的子元素。通过设置 `.container` 的 `display` 属性为 `flex`，可以将其设置为 Flexbox 布局。通过设置 `.item` 的宽度为 `30%`，可以使其在容器中占据三分之一的宽度。通过设置 `.item` 的 `margin-bottom` 属性为 `1rem`，可以使其在垂直方向上保持一定的间距。