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

Question

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

html部分：

<div class="box">
        <div class="name">
            小明
        </div>
        <div class="tips">
            回复
        </div>
        <div class="to_name">
            小红
        </div>
        <div class="content">
            ：这首歌本来的原唱的时候的音高调式，由于E降低用吉他指法比较难弹，所以选用指法简单的C调并且用变调夹 夹在第3品。这样，指法简单了，音高却没有变
        </div>
    </div>

css部分：

.box {
    width: 300px;
    margin: 100px auto;
    background-color: rgb(230, 230, 230);
    padding: 10px;
}

.box .name {
    color: blue;
}

.box .to_name {
    color: red;
}

Answer 1

flex-wrap:wrap可以实现换行

Answer 2

flex-direction: column;