用flex实现大背景分割小背景，然后再往小背景里面放元素

在Flex布局中，你可以通过结合`display: flex`属性以及一些布局技巧来实现大背景分割成若干个小背景区域，并在其内部放置其他元素。这里是一个简单的示例：

首先，设置容器的`display`属性为`flex`，并设置主轴方向(`flex-direction`)，例如水平布局(`row`)或垂直布局(`column`)：

<div class="container" style="display: flex; /* 水平布局 */ flex-direction: row;">
</div>

然后，创建两个背景块，可以使用`flex-basis`来定义它们占用的空间大小，比如将空间分为50%：

<div class="small-background">
  <!-- 小背景内容 -->
</div>
<div class="small-background">
  <!-- 另一个小背景内容 -->
</div>

给小背景添加样式，包括背景颜色、宽度等：

.small-background {
  flex: 0 0 50%; /* 保持大小，不撑开 */
  background-color: #eaeaea; /* 示例背景色 */
}

如果你想在小背景里放入元素，只需像平常那样插入内容：

<div class="small-background">
  <div class="element">
    <!-- 元素内容 -->
  </div>
</div>

记得调整`.element`的样式使其适应背景。