html flex布局换行,如何用css的flex布局实现换行呢？

因为近来要在uniapp中写前端，它会把span，div等转成自己特有的标签，并且都是display: block的。遇到一个写评论回复的地方，需要使用flex实现如下图的排列(当然，float也可以，但是为了以后的兼容性和统一性，就没用float)，回复的内容在右边排不下时，自动排到下面。自己尝试了，发现没能实现，希望大伙能指点一下，谢谢！

html部分：

小明

回复

小红

：这首歌本来的原唱的时候的音高调式，由于E降低用吉他指法比较难弹，所以选用指法简单的C调并且用变调夹 夹在第3品。这样，指法简单了，音高却没有变

css部分：

.box {

width: 300px;

margin: 100px auto;

background-color: rgb(230, 230, 230);

padding: 10px;

}

.box .name {

color: blue;

}

.box .to_name {

color: red;

}