css基礎2：flex 一行均分有間隙佈局

最近有朋友問我佈局問題。要點：怪異盒模型。寫波筆記〜〜〜

有一個 ul 下面有 5個 li ,前四個 li 右邊有 20的邊距。最後一個 li 沒有邊距。求均分？

效果圖如下 ：

 

 

 

方法如下：

方法一：
<ul>     <li><div></div></li>     <li><div></div></li>     <li><div></div></li>     <li><div></div></li>     <li><div></div></li> </ul>	ul {         width: 100%;         height: 210px;         display: flex;     }     li {         width: 100%;         height: 100%;         list-style: none;         width: calc((100%-80px)/5);         margin-right: 20px;     }     li > div {         width: 100%;         height: 100%;     }     li:last-child {         margin: 0;     }
方法二：
<ul>     <li><div></div></li>     <li><div></div></li>     <li><div></div></li>     <li><div></div></li>     <li><div></div></li> </ul>	ul {         width: 100%;         height: 210px;         background: orange;          display: flex     }     li {         width: 100%;         height: 100%;         list-style: none;         width: calc(100%/5);         margin-right: 20px;         box-sizing: border-box;     }     li > div {         width: 100%;         height: 100%;         background: red;   }   li:nth-last-child(1){         margin-right: 0;   }
方法三：
<div id="drap">       <div class="big"></div>       <div class="small"></div>       <div class="big"></div>       <div class="small"></div>       <div class="big"></div>       <div class="small"></div>       <div class="big"></div>       <div class="small"></div>       <div class="big"></div>     </div>	#drap{         width: 100%;         height: 200px;         /* float: right; */         display: flex;       }       .big{         width: calc((100%-80) / 5);         height: 200px;         background-color: aqua;       }       .small{         width: 20px;         height: 200px;         background-color: red;       }