How to use the flex layout of css to achieve line wrapping?

because of the recent need to write a front end in uniapp, it will convert span,div, etc., into its own unique tags, and they are all display: block. When you encounter a place to write a comment reply, you need to use flex to arrange the following image (of course, float is also possible, but for the sake of compatibility and unity in the future, when the content of the reply without float), is not lined up on the right, it will be automatically listed below. I tried and found that it didn"t come true. I hope everyone can give me some advice. thank you!

html section:

<div class="box">
        <div class="name">
            
        </div>
        <div class="tips">
            
        </div>
        <div class="to_name">
            
        </div>
        <div class="content">
            :EC 3
        </div>
    </div>

css section:

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

.box .name {
    color: blue;
}

.box .to_name {
    color: red;
}
Feb.23,2022

flex-wrap:wrap can wrap


flex-direction: column;

Menu