# 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 } ```