Question

我试图保持我的3d元素的宽度为flex容器。但没有获得重新开始。任何人都建议我ie11在这里找到正确的方法吗？

＆＃13;

.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%;
}

＆＃13;

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

＆＃13;

Answer 1

要启用上一个child换行并且100％宽，请将flex-wrap: wrap添加到parent并在flex-basis上使用child。

＆＃13;

.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%;
}

＆＃13;

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

＆＃13;

Answer 2

使用flex来实现您的目标。

.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%;
  flex: 1;
}

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

flex属性指定项目相对于同一容器内其他灵活项目的长度。

它使弹性项目变得灵活，并将弹性基础设置为零，从而产生一个接收指定比例的剩余空间的项目。

显示flex - 保持最后一个元素的全宽

2 个答案: