flex布局之Div平分行宽

如图所示，等分行宽。

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