将弹性框子 div 的宽度设为 50%，并在包装上增长到 100%

Question

我有以下内容

<div style="max-width:100%;flex-wrap:wrap;display:flex">
<div style="width:50%;flex-grow:1"></div>
<div style="width:50%;flex-grow:1"></div>
</div>

我试图做的是让两个子元素从 50% 的宽度开始。 当窗口大小减小时，我希望第二个窗口在第一个窗口下方换行，并且它们都增长到 100%。 现在第一个是从100%开始的。 我正在使用浏览器。

Answer 1

强制项目width:50%是多余的，因为您将使用flex，如果两个项目的flex-grow相等并且flex-basis设置为 0，则可以平均分割宽度。为了获得"在某个点"包装的效果，您可以使用@jake的方法，或者为元素定义一个min-width，之后包装将自然发生。下面是一个实际示例。

Answer 2

添加@media就可以了，或者你也可以看看这篇关于flex响应式设计的文章

.parent{
background: tomato;
height: 100%;
padding: 10px;
display: flex;
flex-wrap:wrap;  
}
.parent > div {
width: 50%;
height: 100px;
}
@media only screen and (max-width: 600px){
.parent > div{   
width: 100%;
}
}

<div class="parent">
<div style="background: yellow"></div>
<div style="background: green"></div>
</div>