文章詳情頁
css - flex(box?)書架布局的問題
瀏覽:158日期:2023-07-20 11:06:41
問題描述
目前有如下結構
<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結構的情況下,讓最后一行如果不與其它行數目一樣,只能靠左顯示,如同iBook一樣。
如果不行,也請提供其它更好的方案不用考慮兼容問題!

問題解答
回答1:flex-flow: row wrapjustify-content: flex-start可以試試看,我項目里有用類似的,但是現在不在電腦前面。只記得這么多。看你的圖片應該是對齊的問題
晚上回來試了一下,看看這樣做行不:http://codepen.io/charleyw/pen/vLXQRM
還是那個思路給最后一行補齊同等數量的元素,讓flex的自動伸縮能生效。不過沒有用JS,而是在一開始創建DOM的時候就額外添加了足夠多的元素,足夠多是多到什么程度是根據你一行最多能顯示多少個來決定的,例如在最大的屏幕上你能顯示20個,那么你就添加19個空元素,這樣不管寬度怎么變,都能保證最后一行(不算空元素)永遠都跟上一行有同樣的元素個數,就能保證flex樣式是一樣的。
回答2:上demo啊
標簽:
CSS
相關文章:
1. javascript - sublime快鍵鍵問題2. javascript - immutable配合react提升性能?3. css - 寫頁面遇到個布局問題,求大佬們幫解答,在線等,急!~4. javascript - nodejs關于進程間發送句柄的一點疑問5. Apache 已經把網站根目錄的改為allow from all了,但是服務器還是不能訪問?6. 實現bing搜索工具urlAPI提交7. 配置Apache時,添加對PHP的支持時語法錯誤8. vue.js - Vue 如何像Angular.js watch 一樣監聽數據變化9. javascript - 移動端上不能實現拖拽布局嗎?10. phpstudy8.1支持win11系統嗎?
排行榜

網公網安備