前言
在實際開發中，我們經常會想要實現的一種布局方式就是三欄等分布局，那么我們如何來解決這個問題呢？
解決
方法一：flex
外層容器也就是ul設置display:flex，對項目也就是li設置flex：auto，代表 flex: 1 1 auto
<style>
* {
list-style: none;
border: 0;
padding: 0;
margin: 0
}
ul {
width: 500px;
height: 200px;
background: red;
display: flex;
margin: auto;
margin-top: 100px;
padding: 0 10px;
align-items: center;
}
li {
background: green;
height: 100px;
width: 500px;
display: inline-block;
margin: 2px;
line-height: 100px;
text-align: center;
flex: auto
}
</style>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
效果圖：
解析：我們注意到width的設置，外層ul是500，li也是500，但是實際看到的確實li平分了ul的寬度，這是因為設置了flex：auto，代表有剩余空間的話項目等分剩余空間放大，空間不足項目等比例縮小
方法二：flex
同上，只不過將flex設置為 1 1 33.33%
<style>
* {
list-style: none;
border: 0;
padding: 0;
margin: 0
}
ul {
width: 500px;
height: 200px;
background: red;
display: flex;
margin: auto;
margin-top: 100px;
padding: 0 10px;
align-items: center;
}
li {
background: green;
height: 100px;
width: 500px;
display: inline-block;
margin: 2px;
line-height: 100px;
text-align: center;
flex: 1 1 33.33%;
}
</style>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
效果圖：