印度登月最關(guān)鍵一步！月船三號(hào)今晚進(jìn)入環(huán)月軌道
8月5日消息，據(jù)印度官方消息，月船三號(hào)將于北京時(shí)間今晚21時(shí)30分左右開始近月制動(dòng)進(jìn)入環(huán)月軌道。這是該探測器能夠成功的最關(guān)鍵步驟之一，如果成功將開始圍
在移動(dòng)端應(yīng)用中，經(jīng)常會(huì)碰到這樣的導(dǎo)航欄，導(dǎo)航欄左邊通常是一個(gè)返回按鈕，中間是標(biāo)題，右邊是工具欄，如下：
圖片
值得注意的是，右側(cè)的工具欄是不固定的，有可能有多個(gè)，也有可能沒有，并且中間的標(biāo)題是整體居中的，如果標(biāo)題過長，還能出現(xiàn)省略號(hào)，各種適應(yīng)場景如下：
圖片
假設(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;}但是，一旦文本過長，就會(huì)和左右的功能區(qū)發(fā)生重疊，如下：
圖片
那么，有沒有辦法可以同時(shí)滿足這兩種情況呢？
下面介紹兩個(gè)方法
還是前面的 flex 布局，相信大家都用過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)文章開頭的效果。
圖片
完整代碼可以查看：
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)我們想要的效果：
圖片
完整代碼可以查看：
這樣一個(gè)實(shí)用的布局小技巧，你學(xué)到了嗎？下面總結(jié)一下：
本文鏈接：http://www.tebozhan.com/showinfo-26-14604-0.html聊聊 CSS 實(shí)現(xiàn)自適應(yīng)導(dǎo)航欄
聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。郵件：2376512515@qq.com
Copyright ? 2016-2023 天津谷騏科技有限公司 版權(quán)所有 sitemap.xml
違法及侵權(quán)請聯(lián)系：2376512515@qq.com 津ICP備18001702號(hào)
津公網(wǎng)安備 12010102000574號(hào)