授人以鱼不如授人以渔。
flex布局

在最外层p设置display:flex;之后在里面分三个p设样式

.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>

对容器使用justify-content: space-between;可以两边对齐

父级容器使用justify-content: space-between;两端对齐，项目之间的间隔都相等！
你耶可以参考这个

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

这种场景更适合用百分比宽度来布局，而不是flex。任何布局都有它的局限性，要灵活使用。3个的话就设置width:33.33%

补充一点，如果你要在移动端使用flex.建议只使用flex 属性。
可以参考下淘宝的做法，flex 和 box 搭配使用，参考链接：http://h5.m.taobao.com/mlapp/...

其它参考：
https://css-tricks.com/old-fl...
https://www.html5rocks.com/en...

flex版的: 详解实现网页的各种布局

父元素 设置display:flex;
子元素 设置 justify-content: space-between;