css flex 2：1布局

CSS Flexbox是一种用于创建灵活的布局的CSS属性。在Flexbox布局中，可以使用flex属性来定义子元素的大小和分布。2:1布局指的是一个容器内的两个子元素，其中一个元素的宽度是另一个元素宽度的两倍。

下面是一个示例代码，演示如何实现2:1布局：

 .container {
 display: flex;
 }
 .item1 {
 flex:2;
 background-color: red;
 }
 .item2 {
 flex:1;
 background-color: blue;
 }
</style>

<div class="container">
 <div class="item1">Item1</div>
 <div class="item2">Item2</div>
</div>

在这个示例中，`.container`是一个具有`display: flex`属性的容器。`.item1`和`.item2`是容器内的两个子元素。通过分别设置它们的`flex`属性为2和1，我们实现了2:1的布局。

这样，`.item1`元素的宽度将是`.item2`元素宽度的两倍。你可以根据需要调整它们的样式和内容来适应你的布局要求。