需求：做出下面的样式
文章来源：https://www.toymoban.com/news/detail-522776.html
代码实现：文章来源地址https://www.toymoban.com/news/detail-522776.html
<body>
<ul class="nav">
<li><a href="#">HTML/CSS</a></li>
<li><a href="#">Browser Side</a></li>
<li><a href="#">Server Side</a></li>
<li><a href="#">Programming</a></li>
<li><a href="#">XML</a></li>
<li><a href="#">Web Building</a></li>
<li><a href="#">Reference</a></li>
</ul>
</body>
<style>
.nav{
width: 1210px;
height: 48px;
line-height: 48px;
background-color: #e8e7e3;
margin: 50px auto;
/* 设置为弹性容器 */
display: flex;
flex-direction: row;
}
/* 控制盒子，自动均匀分布，弹满 */
.nav li{
/* 设置增长系数： 不设置宽高，通过设置伸展系数1，让他们自动均匀的吧空白地方弹满 */
flex-grow: 1;
}
/* 设置盒子里面的文字 */
.nav a{
/* display: block; 加了这个后， text-align: center;才会有效 */
display: block;
color: #808080;
text-decoration: none;
text-align: center;
font-size: 16px;
}
.nav a:hover{
color:white;
background-color: #636363;
}
</style>
到了这里，关于十二、flex练习的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
![[HTML]Web前端开发技术7（HTML5、CSS3、JavaScript ）CSS的定位机制——喵喵画网页](https://imgs.yssmx.com/Uploads/2024/02/755631-1.png)
![[HTML]Web前端开发技术9（HTML5、CSS3、JavaScript ）——喵喵画网页](https://imgs.yssmx.com/Uploads/2024/02/777294-1.png)
![[HTML]Web前端开发技术12（HTML5、CSS3、JavaScript ）——喵喵画网页](https://imgs.yssmx.com/Uploads/2024/02/793019-1.png)
![[HTML]Web前端开发技术26（HTML5、CSS3、JavaScript ）JavaScript基础——喵喵画网页](https://imgs.yssmx.com/Uploads/2024/02/828994-1.png)
![[HTML]Web前端开发技术5.2（HTML5、CSS3、JavaScript ）CSS基础，decoration，selector，properties，Cascading——喵喵画网页](https://imgs.yssmx.com/Uploads/2024/02/751717-1.png)
