問題描述

目前有如下結(jié)構(gòu)

<p class='book-list'> <p class='cover'></p> <p class='cover'></p> <p class='cover'></p> <p class='cover'></p> <p class='cover'></p></p>

我通過flex布局，只能做出如下效果，

有沒有在不改變dom結(jié)構(gòu)的情況下，讓最后一行如果不與其它行數(shù)目一樣，只能靠左顯示，如同iBook一樣。

如果不行，也請(qǐng)?zhí)峁┢渌玫姆桨?b>不用考慮兼容問題！

問題解答

flex-flow: row wrapjustify-content: flex-start可以試試看，我項(xiàng)目里有用類似的，但是現(xiàn)在不在電腦前面。只記得這么多。看你的圖片應(yīng)該是對(duì)齊的問題

晚上回來試了一下，看看這樣做行不:http://codepen.io/charleyw/pen/vLXQRM

還是那個(gè)思路給最后一行補(bǔ)齊同等數(shù)量的元素，讓flex的自動(dòng)伸縮能生效。不過沒有用JS，而是在一開始創(chuàng)建DOM的時(shí)候就額外添加了足夠多的元素，足夠多是多到什么程度是根據(jù)你一行最多能顯示多少個(gè)來決定的，例如在最大的屏幕上你能顯示20個(gè)，那么你就添加19個(gè)空元素，這樣不管寬度怎么變，都能保證最后一行（不算空元素）永遠(yuǎn)都跟上一行有同樣的元素個(gè)數(shù)，就能保證flex樣式是一樣的。

上demo啊