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;       }