具有3个div的容器，使用Flex-box/Grid

Flexbox和Grid是两种常用的CSS布局技术，用于创建响应式的网页布局。它们可以帮助开发人员更轻松地实现各种布局需求。

1. Flexbox（弹性盒子布局）： Flexbox是一种一维布局模型，适用于创建灵活的、自适应的布局。它通过将容器中的元素放置在一个或多个轴上来实现布局。以下是Flexbox的一些特点和应用场景：

• 特点：
  • 简单易用，适合创建简单的布局。
  • 自适应性强，可以根据容器的大小自动调整元素的位置和大小。
  • 可以轻松实现水平和垂直居中。
• 应用场景：
  • 创建导航栏、页脚和侧边栏等简单布局。
  • 实现响应式布局，适应不同屏幕尺寸的设备。
  • 创建灵活的网格布局。

推荐的腾讯云相关产品和产品介绍链接地址：

• 腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
• 腾讯云弹性伸缩（AS）：https://cloud.tencent.com/product/as
• 腾讯云负载均衡（CLB）：https://cloud.tencent.com/product/clb

1. Grid（网格布局）： Grid是一种二维布局模型，适用于创建复杂的网格布局。它通过将容器划分为行和列来实现布局。以下是Grid的一些特点和应用场景：

• 特点：
  • 可以创建复杂的网格布局，支持多行多列的布局需求。
  • 可以对网格进行精确的控制，包括行高、列宽、对齐方式等。
  • 支持自动调整布局，可以根据容器的大小自动调整网格的位置和大小。
• 应用场景：
  • 创建复杂的网页布局，如新闻网站的首页布局。
  • 实现响应式布局，适应不同屏幕尺寸的设备。
  • 创建网格状的图像展示或产品展示。

推荐的腾讯云相关产品和产品介绍链接地址：

• 腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
• 腾讯云弹性伸缩（AS）：https://cloud.tencent.com/product/as
• 腾讯云负载均衡（CLB）：https://cloud.tencent.com/product/clb

以上是关于使用Flexbox和Grid创建具有3个div的容器的答案。希望对您有帮助！