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是实际的例子。

Answer 2

添加@media可行，或者您也可以查看this article关于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>

使flexbox子div的宽度为50％，并在缠绕时增长到100％

2 个答案: