flex佈局之Div平分行寬
阿新 • • 發佈:2019-02-06
如圖所示,等分行寬。
通過float+padding+負margin+盒模型是我之前用的比較多的一種方式,其他的方式大同小異,抱著一招鮮吃遍天的思想,就沒有放在心上。然而第一次面試時,面試官問了等分行寬,我說了,他問還有呢,我表示只記得最常用的;第二次面試時,我提前備好了其他幾種方案,可另一個面試官,還要追問還有麼?我一臉黑人問號,心中默唸wtf。
後來回來複習彈性佈局時候,發現彈性佈局也可以實現類似的功能,甚是簡單,心中竊喜,面試官可能想要的是這種佈局方式吧!
css
.wrap{ display: flex; justify-content: space-between; --n : 6; } .wrap div{ // 假設間隔距離為m畫素 則20應被替換為 m-m/var(--n) width: calc(calc((100/var(--n))*1%) - 20px); height: 100px; }
js
(function(){
const wrap = document.getElementById('wrap');
let inLenght = wrap.children.length;
wrap.style.setProperty('--n',inLenght);
}());
html
<div class="wrap" id="wrap"> <div style="background-color: lightgreen;"></div> <div style="background-color: lightblue;"></div> <div style="background-color: lightyellow;"></div> <div style="background-color: pink;"></div> </div>
如有更好的方法可以讓面試官不再追問“還有麼”,還請各位不吝賜教,每天都會登入csdn。