CSS3 伸縮導航欄是一種能夠自適應屏幕大小的網頁導航欄。通過使用CSS3的flex布局和媒體查詢等技術，使得導航欄在不同設備上的顯示效果更為友好，提升了網頁的用戶體驗。

/* CSS代碼 */
.navbar{
display: flex;
/* 將子元素在主軸（水平方向）上平分父容器 */
justify-content: space-between;
/* 設置父容器沿交叉軸（垂直方向）水平居中 */
align-items: center;
/* 給導航欄設置寬度，讓其適應頁面 */
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 10px 20px;
/* 設置背景色和字體顏色 */
background-color: #333;
color: #fff;
}
.navbar__logo{
/* 設置logo圖片大小 */
width: 50px;
height: 50px;
}
.navbar__list{
/* 將子元素在主軸（水平方向）上平分父容器 */
display: flex;
justify-content: space-between;
/* 去除列表項的默認樣式 */
list-style: none;
margin: 0;
padding: 0;
}
.navbar__item{
/* 設置每個列表項之間的間距 */
margin-right: 20px;
}
.navbar__link{
/* 設置鏈接文字樣式 */
color: #fff;
font-size: 16px;
text-decoration: none;
}
/* 媒體查詢 */
@media screen and (max-width: 600px) {
.navbar{
flex-direction: column;
padding: 20px;
}
.navbar__list{
/* 改變主軸方向，讓列表項豎直排列 */
flex-direction: column;
margin-top: 20px;
margin-bottom: 20px;
}
.navbar__item{
margin-right: 0;
margin-bottom: 10px;
}
}

在上述代碼中，通過定義.navbar為flex容器，使得其內部的子元素.navbar__logo（logo圖片）、.navbar__list（導航鏈接列表）在水平方向上平分父容器，以此達到logo和導航鏈接水平排列的效果。通過設置媒體查詢來解決頁面縮小導致導航欄顯示不完全的問題，將導航欄變?yōu)樨Q直排列，更好地適應不同的設備屏幕。總之，CSS3 伸縮導航欄使得網頁導航欄更加實用，可以幫助用戶更方便地瀏覽網站內容。