html - flex布局，如何实现9宫格列表两端对齐

Question

如图所以，用flex布局方式，如何让热门应用的的右端与边框对齐，达到两端对齐的效果，因为是循环列表，不是单行，不知道该如何控制，请大神指点一下！

Answer 1

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

Answer 2

在最外层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>

Answer 3

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

Answer 4

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

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

Answer 5

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

Answer 6

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

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

Answer 7

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

Answer 8

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