根据服务器返回条目，N个菜单平分标题栏宽度。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>flex：伸缩菜单</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 500px;
height: 400px;
border: 1px solid #CCCCCC;
margin: 100px auto;
}
div>ul{
width: 100%;
list-style: none; /* 去掉列表样式 */
display: flex; /* 设置父容器为伸缩盒子 */
}
div>ul>li {
flex: 1;
background-color: #7DFFE7;
border-right: 1px solid #CCCCCC;
line-height: 36px;
/* 元素居中显示 */
height: 36px;
text-align: center;
}
</style>
</head>
<body>
<div >
<ul>
<li>首页体育</li>
<li>热门新闻</li>
<li>娱乐新闻</li>
<li>钓鱼频道</li>
</ul>
</div>
</body>
</html>===================================================
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>flex：伸缩菜单</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 900px;
height: 400px;
border: 1px solid green;
margin: 0px auto;
display: flex;
/* 设置主轴方向的排列方向 */
/* justify-content: space-around; */
/* align-items-设置子元素，在侧轴方向上的对齐方式
center：设置在侧轴上，居中对齐
flex-start：设置在侧轴上，顶对齐
flex-end：设置在侧轴上，底部对齐
stretch：拉伸，让子元素在侧轴方向上拉伸，填充满整个侧轴方向，【默认值】
baseline：文本基线
*/
align-items: center;
}
.first{
width: 200px;
height: 200px;
background-color: red;
align-self: flex-start;
}
.second{
width: 200px;
height: 200px;
background-color: beige;
size: 39px;
/* 设置单个元素，在侧轴方向的对齐方式 */
align-self: flex-end;
}
.third{
width: 200px;
height: 200px;
background-color: deeppink;
}
</style>
</head>
<body>
<div class="box">
<div class="first">1cabcgpfryc</div>
<div class="second" style="font-size: 100px;">ggb2</div>
<div class="third">bpbpbpbp3</div>
</div>
</body>
</html>