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

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>