【CSS】1860- CSS 實現自適應導航欄
在移動端應用中，經常會碰到這樣的導航欄，導航欄左邊通常是一個返回按鈕，中間是標題，右邊是工具欄，如下
值得注意的是，右側的工具欄是不固定的，有可能有多個，也有可能沒有，并且中間的標題是整體居中的，如果標題過長，還能出現省略號，各種適應場景如下
這樣的自適應標題如何實現呢？一起看看吧
一、兩種不完美實現
假設布局是這樣的
<appbar>
<tool>
<a class="icon back"></a>
</tool>
<h2 class="title">我是標題</h2>
<tool class="right">
<a class="link">規(guī)則</a>
</tool>
</appbar>
很多同學可能會直接用 flex 布局讓標題自動填充剩余空間，然后設置文本居中
appbar{
display: flex
}
.title{
flex: 1;
text-align: center;
}
這種布局在左右功能區(qū)寬度差不多的時候還好，看著像居中的，一旦右邊的寬度差異很大，就看著不居中了
還有一種是絕對定位，可以實現整體居中
.title{
position: absolute;
left: 0;
right: 0;
text-align: center;
}
但是，一旦文本過長，就會和左右的功能區(qū)發(fā)生重疊，如下
那么，有沒有辦法可以同時滿足這兩種情況呢？
下面介紹兩個方法
二、flex 布局實現
還是前面的 flex 布局，相信大家都用過flex:1這樣的屬性，它可以讓子元素平均分配剩余空間
.item{
flex: 1
}
如果有3個子元素，那么就會平分為3等分
如果僅僅設置左右兩邊的flex:1，中間寬度不設置，那么中間部分的寬度就自適應內容寬度，由于兩邊寬度相等，「因此中間的文本看著就是整體居中的」
當左右空間不足以均分剩余空間時，會自動壓縮另一個空間
直到中間部分不足以放下文本內容，出現省略號
按照這個原理，先將左右兩邊設置平均分布
tool{
flex:1;
}
這樣標題就是整體居中的了
然后，只需要將右邊菜單居右展示就行了，比如用flex中的justify-content
.right{
display: flex;
justify-content: end;
}
這樣就就可以很輕松的實現文章開頭的效果
完整代碼可以查看：
CSS Appbar flex (juejin.cn)[1]
CSS Appbar flex (codepen.io)[2]
三、grid 布局實現
grid 布局也能和能輕易的實現這種效果，原理也基本一致。
和flex中的flex:1比較類似的是，grid中也有一個單位也能做到均等分布的效果，那就是1fr
div{
display: grid;
grid-template-columns: 1fr auto 1fr;
}
這樣3個子容器，中間是自適應寬度，左右是自動等分的
原理和前面相同，這里就不重復了，關鍵實現如下
appbar{
display: grid;
grid-template-columns: 1fr auto 1fr;
}
.right{
justify-content: end;
}
這樣也能實現我們想要的效果
完整代碼可以查看：
CSS Appbar grid (juejin.cn)[3]
CSS Appbar grid (codepen.io)[4]
四、總結一下
這樣一個實用的布局小技巧，你學到了嗎？下面總結一下
移動端導航欄一般都是標題整體居中的，并且右側的工具欄是不固定的
傳統(tǒng)的標題flex自適應和絕對定位都有一定的局限性
在剩余空間充足情況下， flex:1可以讓左右兩邊布局尺寸相同，這樣中間標題看著就是居中的了
在剩余空間不足情況下，中間標題空間會撐滿剩余空間，超長則出現省略號
grid 和 flex 原理相同，有一個1fr單位也可以做到均等分布的效果
一般布局都可以通過 CSS 來實現，足夠靈活，不到萬不得已，都不要考慮 JS。最后，如果覺得還不錯，對你有幫助的話，歡迎點贊、在看、轉發(fā)???
[1]CSS Appbar grid (juejin.cn)： https://code.juejin.cn/pen/7291692696299634727
[2]CSS Appbar flex (codepen.io)： https://codepen.io/xboxyan/pen/poGoPWj
[3]CSS Appbar grid (juejin.cn)： https://code.juejin.cn/pen/7291696160866041906
[4]CSS Appbar grid (codepen.io)： https://codepen.io/xboxyan/pen/mdvdmBz