# flex导航条的设置
> 一种超出移动边界的导航条设置，注意要包裹两层的div，其中的一层主要作用负责超出部分的处理。
```
<div class="nav">
<div class="nav-bar">
<p>热门</p>
<p>健康饮食</p>
<p>两性健康</p>
<p>孕产育儿</p>
<p>常见疾病</p>
</div>
</div>
```
> 最外层设置padding-right主要是因为overflow的缘故，导致边界消失而增加的设置，也可设置margin-right。
```
.nav{
padding-right: 19px;
}
```
> overflow-x: auto用于移动超出边界后的隐藏处理，不要用 overflow-x: hide，会把padding及margin隐藏。
```
.nav-bar{
display: flex;
height: 41px;
align-items: center;
overflow-x: auto;
}
```
> flex-shrink: 0;
防止收缩，text-align文字的居中，上面为什么没用justify-content: space-around或space-between，是因为超出边界后这么设置有问题
```
.nav-bar p{
font-size: 14px;
color: #101010;
margin: 0 15px;
flex-shrink: 0;
text-align: center;
}
```
> 点击后的样式设置
```
.nav-bar p:hover{
color: #28B8A1;
font-weight: bold;
border-bottom: 2px solid #28B8A1
}
```
