如何使flex项目占据容器的整个宽度，以便其他项目将来到？

Question

这是结果：

只是基本的显示flex，但我想在这里实现的是将2个项目放在它下面，所以第一个项目占据了上面的容器并且将使用margin auto对中？我正在考虑使用flex列，但我认为这不对

Answer 1

您可以尝试这样的事情： 宽度：calc（50％ - 2px）用于否定使用的2 px边框;

＆＃13;

＆＃13;

.wrap{
display:flex;
flex-wrap:wrap;
background-color:pink;
}
.box{
width:100%;
height:100px;
background-color: cyan;
border: 1px black solid;
}
.box1{
width:calc(50% - 2px);
height:100px;
background-color: green;
border: 1px black solid;
}

＆＃13;

<div class="wrap">
<div class="box"></div>
<div class="box1"></div>
<div class="box1"></div>
</div>

＆＃13;

＆＃13;

＆＃13;