1、前言
之前我们实现导航布局，可能需要用到float浮动的方法来设置导航条。今天我们学到了Flex弹性盒，那我们就用弹性盒的方式来实现一下导航条的布局
2、效果展示
导航块宽度等比例分配大小
3、实现代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ padding: 0; margin: 0; list-style: none; text-decoration: none; } .divWrap{ width: 1210px; height: 48px; background-color: #E8E7E3; margin: 60px auto; } ul{ height: 48px; line-height: 48px; display: flex; } ul>li{ /* 当把ul设置为弹性容器的时候，子元素li则为弹性元素 */ text-align: center; /* flex-grow 指定弹性元素的收缩系数 */ flex-grow: 1; color: #777777; font-family: "SF Pro SC","SF Pro Text","SF Pro Icons","PingFang SC", Verdana, Arial, '微软雅黑','宋体'; font-size: 14px; } ul>li:hover{ background-color: #3F3F3F; color: white; } </style> </head> <body> <div class="divWrap"> <ul> <li>HTML/CSS</li> <li>Browser Side</li> <li>Server Side</li> <li>Programming</li> <li>XML</li> <li>Web Building</li> <li>Reference</li> </ul> </div> </body> </html>
4、细节说明
用display: flex;把ul设置为弹性容器，效果如下：
再用flex-grow: 1;把li设置为弹性元素，效果如下：
两个属性的设置，就可以实现导航条的整体布局，比我们之前用的float布局方便很多，但是兼容性不flex及float，对于移动端的布局可以用flex布局。
