CSS Flex左边有一个大的Div，右边有两个小的Div

CSS Flex是一种用于布局的CSS属性，它可以帮助我们创建灵活的、响应式的网页布局。在这个问答内容中，我们需要实现一个布局，左边有一个大的Div，右边有两个小的Div。

首先，我们可以使用Flex容器来包裹这三个Div元素。通过设置容器的display属性为flex，我们可以将其变为一个Flex容器。

.container {
  display: flex;
}

接下来，我们需要设置左边的大Div和右边的两个小Div的样式。我们可以使用Flex项的flex属性来控制它们在Flex容器中的占比。

.left {
  flex: 1;
}

.right {
  flex: 2;
}

在上述代码中，我们将左边的大Div的flex属性设置为1，右边的两个小Div的flex属性设置为2。这意味着右边的两个小Div将会占据左边大Div的两倍宽度。

最后，我们可以为这些Div元素添加一些样式来美化它们。

.container {
  display: flex;
}

.left {
  flex: 1;
  background-color: #f2f2f2;
  padding: 20px;
}

.right {
  flex: 2;
  display: flex;
  justify-content: space-between;
  background-color: #e6e6e6;
  padding: 20px;
}

.right .small-div {
  width: 100px;
  height: 100px;
  background-color: #ccc;
}

在上述代码中，我们为左边的大Div设置了背景颜色、内边距，并为右边的两个小Div设置了背景颜色、内边距，并使用了flex布局来使它们水平排列，并且两个小Div之间有间距。

这样，我们就实现了一个左边有一个大的Div，右边有两个小的Div的布局。根据具体的需求，你可以根据这个基础布局进行进一步的样式调整和功能扩展。

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

• 腾讯云CSS Flex布局