<div class="content-wrapper">
<div class="content-list">1</div>
<div class="content-list">1</div>
<div class="content-list">1</div>
</div>
*{
margin: 0;
padding: 0;
}
.content-wrapper{
display: flex;
width: 100%;
height: 40px;
line-height: 40px;
background-color: rgba(0,0,0,0.5);
}
.content-wrapper .content-list{
flex: 1;
text-align: center;
color: #FFFFFF;
}
主要內容就是給父容器的display 設置爲flex定位,然後子元素設置flex: 1;就可以設置三個相等的div,假如變成了4個div 那麼就會分成4等分 在nav標籤或者底部菜單 都能很好的應用