使用弹性框在新行上强制最后一个 div

Question

我有这个HTML

<div class="wrap">
     <div class="one"></div>
     <div class="two"></div>
     <div class="three"></div>
     <div class="four"></div>
</div> 

加上这个 CSS

.wrap {
    display: flex;
    align-items: center;
}
.one {
    flex: 0 1 200px;
}
.two {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
}
.three {
    display: flex;
    flex: 0 1 200px;
    justify-content: flex-end;
}
.four {
    ???
}

我想让它看起来像这样，我不知道 .four 还能用什么来让最后一个div 在新行加上 100% 宽度上移动

[- one -----][----- two -----][----- three -]
[----------------- four --------------------]

自动取款机看起来像这样

[- one -----][----- two -----][----- three -] [- four -----]

我知道我可以使用另一个

<div class="wrap">

但我不想要这个，谢谢。

Answer 1

将flex-wrap: wrap添加到.wrap类中，并使您的.four类flex: 1 1 100%，这应该可以解决问题：

.wrap {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
.one {
    flex: 0 1 200px;
}
.two {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
}
.three {
    display: flex;
    flex: 0 1 200px;
    justify-content: flex-end;
}
.four {
   flex: 1 1 100%;
}

这是一个 Codepen 示例(我为您的div 添加了边框和高度，只是为了使其更易于可视化(。

Answer 2

请检查您可以尝试一下

<div class="wrap">
     <div class="one"></div>
     <div class="two"></div>
     <div class="three"></div>
     <div class="four"></div>
</div> 

.CSS

.wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}
.wrap > div{
    border: 1px solid;
    height: 200px;
}
.one {
    flex: 0 1 200px;
}
.two {
    flex: 1 1 auto;
}
.three {
    flex: 0 1 200px;
}
.four {
    flex: 100%;
}

链接 https://jsfiddle.net/JentiDabhi/eoat01zn/

Answer 3

这

很简单：为此，请执行以下操作：

.wrapper{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    background: blue;
    width: 100%;
}
.one, .two, .three{
width: 33%;
background:red;
}
.four{
width:100%;
background:pink;
}

<div class="wrapper">
  <div class="one">
    one 
  </div>
  <div class="two">
    two
  </div>
  <div class="three">
  three
  </div>
  <div class="four">
  four
  </div>
</div>