問題描述

如圖所以，用flex布局方式，如何讓熱門應(yīng)用的的右端與邊框?qū)R，達(dá)到兩端對(duì)齊的效果，因?yàn)槭茄h(huán)列表，不是單行，不知道該如何控制，請(qǐng)大神指點(diǎn)一下！

問題解答

授人以魚不如授人以漁。flex布局

在最外層p設(shè)置display:flex;之后在里面分三個(gè)p設(shè)樣式

.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>回答3：

對(duì)容器使用justify-content: space-between;可以兩邊對(duì)齊

父級(jí)容器使用justify-content: space-between;兩端對(duì)齊，項(xiàng)目之間的間隔都相等！你耶可以參考這個(gè)

justify-content : 在主軸上的對(duì)齊方式 flex-start 做對(duì)齊 flex-end 右對(duì)齊 center居中 space-between 兩端對(duì)齊，項(xiàng)目之間的間隔都相等 space-around 每個(gè)項(xiàng)目兩側(cè)的間隔相等，所以，項(xiàng)目之間的間隔要大與與邊框的距離回答5：

這種場景更適合用百分比寬度來布局，而不是flex。任何布局都有它的局限性，要靈活使用。3個(gè)的話就設(shè)置width:33.33%

補(bǔ)充一點(diǎn)，如果你要在移動(dòng)端使用flex.建議只使用flex 屬性。可以參考下淘寶的做法，flex 和 box 搭配使用，參考鏈接：http://h5.m.taobao.com/mlapp/...

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

flex版的: 詳解實(shí)現(xiàn)網(wǎng)頁的各種布局

父元素 設(shè)置display:flex;子元素 設(shè)置 justify-content: space-between;