显示flex-使最后一个元素保持全角

Question

我正在尝试使3d元素保持flex容器的全宽。但没有得到重用。有人建议我正确的方式ie11吗？

.parent{
  border:1px solid red;
  display:flex;
  justify-content:space-between;
  padding:0 40px;
}

.child{
  flex:0 0 30%;
  border:1px dashed green;
}

.child.last{
/* not working */
  width:100%;
}

<div class="parent">
  <div class="child">one</div>
  <div class="child">two</div>
  <div class="child last">three</div>
</div>

Answer 1

为了使最后child包装和100％的宽度，添加flex-wrap: wrap到parent 和使用flex-basis的最后一个child。

.parent{
  border:1px solid red;
  display:flex;
  flex-wrap: wrap;
  justify-content:space-between;
  padding:0 40px;
}

.child{
  flex:0 0 30%;
  border:1px dashed green;
}

.child.last{
  flex-basis: 100%;
}

<div class="parent">
  <div class="child">one</div>
  <div class="child">two</div>
  <div class="child last">three</div>
</div>