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