It is better to teach a man to fish than to teach him to fish.
flex layout

Set display:flex on the outermost p; then set styles on three p’s inside

.row{
    display: flex;
    width: 100%;
}
.col-33{ 
    flex: 0 0 33.3%; 
    max-width: 33.3%; 
    }
.text-center{
    text-align:center;
}   

<p>
    <p class="col-33 text-left"></p>
    <p class="col-33 text-center"></p>
    <p class="col-33 text-right"></p>
</p>

Use justify-content: space-between; on the container to align both sides

The parent container uses justify-content: space-between; to align both ends, and the space between items is equal!
You can refer to this

justify-content : 在主轴上的对齐方式
                    flex-start    做对齐
                    flex-end    右对齐
                    center        居中
                    space-between    两端对齐，项目之间的间隔都相等
                    space-around     每个项目两侧的间隔相等，所以，项目之间的间隔要大与与边框的距离

This scenario is more suitable for layout using percentage width instead of flex. Any layout has its limitations and must be used flexibly. If there are 3, set width:33.33%

One more thing, if you want to use flex on the mobile side, it is recommended to only use the flex attribute.
You can refer to Taobao’s approach, use flex and box together, reference link: http://h5.m.taobao.com/mlapp/...

Other references:
https://css-tricks.com/old-fl...
https://www.html5rocks.com/en...

flex version: detailed explanation of various layouts of web pages

The parent element sets display:flex;
The child element sets justify-content: space-between;