用flexbox强制最后一个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 --------------------]

atm看起来像这样

[- 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添加了边框和高度只是为了使其更易于可视化）。