直屏旗艦來了 iQOO 12和K70 Pro同臺競技
旗艦機基本上使用的都是雙曲面屏幕，這就讓很多喜歡直屏的愛好者在苦等一款直屏旗艦，這次，你們等到了。據博主數碼閑聊站帶來的最新爆料稱，Redmi下代旗艦K70 Pro和iQOO 12兩款手
在移動端應用中，經常會碰到這樣的導航欄，導航欄左邊通常是一個返回按鈕，中間是標題，右邊是工具欄，如下：
圖片
值得注意的是，右側的工具欄是不固定的，有可能有多個，也有可能沒有，并且中間的標題是整體居中的，如果標題過長，還能出現省略號，各種適應場景如下：
圖片
假設布局是這樣的：
<appbar> <tool> <a class="icon back"></a> </tool> <h2 class="title">我是標題</h2> <tool class="right"> <a class="link">規則</a> </tool></appbar>很多同學可能會直接用 flex 布局讓標題自動填充剩余空間，然后設置文本居中。
appbar{ display: flex}.title{ flex: 1; text-align: center;}這種布局在左右功能區寬度差不多的時候還好，看著像居中的，一旦右邊的寬度差異很大，就看著不居中了。
圖片
還有一種是絕對定位，可以實現整體居中。
.title{ position: absolute; left: 0; right: 0; text-align: center;}但是，一旦文本過長，就會和左右的功能區發生重疊，如下：
圖片
那么，有沒有辦法可以同時滿足這兩種情況呢？
下面介紹兩個方法
還是前面的 flex 布局，相信大家都用過flex:1這樣的屬性，它可以讓子元素平均分配剩余空間。
.item{ flex: 1}如果有3個子元素，那么就會平分為3等分。
圖片
如果僅僅設置左右兩邊的flex:1，中間寬度不設置，那么中間部分的寬度就自適應內容寬度，由于兩邊寬度相等，「因此中間的文本看著就是整體居中的」。
圖片
當左右空間不足以均分剩余空間時，會自動壓縮另一個空間。
圖片
直到中間部分不足以放下文本內容，出現省略號。
圖片
按照這個原理，先將左右兩邊設置平均分布。
tool{ flex:1;}這樣標題就是整體居中的了。
圖片
然后，只需要將右邊菜單居右展示就行了，比如用flex中的justify-content。
.right{ display: flex; justify-content: end;}這樣就就可以很輕松的實現文章開頭的效果。
圖片
完整代碼可以查看：
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;}這樣也能實現我們想要的效果：
圖片
完整代碼可以查看：
這樣一個實用的布局小技巧，你學到了嗎？下面總結一下：
本文鏈接：http://www.tebozhan.com/showinfo-26-14575-0.html聊聊 CSS 實現自適應導航欄
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
上一篇： Golang數組：全面指南與實際示例
Copyright ? 2016-2023 天津谷騏科技有限公司 版權所有 sitemap.xml
違法及侵權請聯系：2376512515@qq.com 津ICP備18001702號
津公網安備 12010102000574號