CSS flexbox: 3列为2+1

CSS flexbox是一种用于布局和排列网页元素的弹性盒子模型。它提供了一种简单而灵活的方式来创建响应式的网页布局。

在这个问题中，"3列为2+1"意味着我们希望创建一个包含3列的布局，其中前两列的宽度比第三列宽。使用flexbox，我们可以轻松实现这个布局。

首先，我们需要创建一个包含3个子元素的容器。可以使用以下HTML代码：

<div class="container">
  <div class="column">Column 1</div>
  <div class="column">Column 2</div>
  <div class="column">Column 3</div>
</div>

接下来，我们需要使用CSS来定义容器和子元素的样式。我们可以使用flexbox属性来实现所需的布局。以下是一个示例的CSS代码：

.container {
  display: flex;
}

.column {
  flex: 1;
}

.column:nth-child(3) {
  flex: 2;
}

在上面的代码中，我们将容器的display属性设置为flex，这样它就成为了一个flex容器。然后，我们将每个子元素的flex属性设置为1，这样它们将平均分配容器的可用空间。最后，我们使用:nth-child(3)选择器来选择第三个子元素，并将其flex属性设置为2，使其宽度是前两个子元素的两倍。

这样，我们就实现了一个3列为2+1的布局。前两列的宽度将相等，而第三列的宽度将是前两列的两倍。

关于CSS flexbox的更多信息和用法，可以参考腾讯云的相关产品文档：CSS flexbox布局。