flex布局使用justify-content: space-between;，由于數量不足，導致間距空白，

?

?

?

建議用js填充元素

// flex空白元素填充 function flex_empty(listbox,ele,num,emptyclass){var len=listbox.find(ele).length;var need=Math.ceil(len/num)*num-len;for(var i=0;i<need;i++){var create_ele=document.createElement(ele);create_ele.className=emptyclass;listbox.append(create_ele);} }

　　

使用！

flex_empty($('.activity_online_list'),'li',3,'empty');

參數說明：1：直接的外包裹框，一般為ul，2：對應的要排版的元素，3：正常情況修下每行排版的元素個數，4：補充元素的類別

?

?

?

轉載于:https://www.cnblogs.com/ghfjj/p/7975622.html

總結

以上是生活随笔為你收集整理的flex 自适应排版中由于数量不够造成的空白的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。