如圖所示，等分行寬。

通過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。