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;