指明父元素为display：flex；然后给子元素一个flex值就可以按各元素所占的flex比值均分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style media="screen">
.tab{
display: flex;
100%;
background: red;
height: 40px;
line-height: 40px;
}
.tab .tab-item{
flex: 2;
text-align: center;
}
.tab .tab-item:hover{
background: blue;
}
</style>
<title>d</title>
</head>
<body>
<div class="tab">
<div class="tab-item">
apple
</div>
<div class="tab-item">
pear
</div>
<div class="tab-item">
orange
</div>
</div>
</body>
</html>
1：2:3
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style media="screen">
.tab{
display: flex;
100%;
background: red;
height: 40px;
line-height: 40px;
}
.tab .tab-item1{
flex: 1;
text-align: center;
}
.tab .tab-item2{
flex: 2;
text-align: center;
}
.tab .tab-item3{
flex: 3;
text-align: center;
}
.tab div:hover{
background: blue;
}
</style>
<title>d</title>
</head>
<body>
<div class="tab">
<div class="tab-item1">
apple
</div>
<div class="tab-item2">
pear
</div>
<div class="tab-item3">
orange
</div>
</div>
</body>
</html>
You can change the world with your heart,even a lot of changes sometimes unless you won't geiv up....