html - 使 flexbox 子 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% 开始的。我正在使用 Chrome。

Answer 1

将元素强制设置为 width:50% 是多余的，因为您将使用 flex，如果 flex-grow 对两个元素都是相等的，并且 flex-basis 设置为 0。要获得“在特定点”包装的效果，您可以使用@jake 的方法，或定义一个 min- width 元素，之后换行会自然发生。 Here是一个实际的例子。