您好,登錄后才能下訂單哦!
這篇文章將為大家詳細(xì)講解有關(guān)如何使用CSS Flexbox構(gòu)建網(wǎng)站標(biāo)題,小編覺(jué)得挺實(shí)用的,因此分享給大家做個(gè)參考,希望大家閱讀完這篇文章后可以有所收獲。
在 CSS3 沒(méi)有普及的時(shí)候,創(chuàng)建一個(gè)網(wǎng)站 header 是一項(xiàng)既可怕又困難的任務(wù) ?。那時(shí),F(xiàn)lexbox 還是個(gè)新東西,我們不得不使用老方法,比如 float
和clearfix
技術(shù)。今天,情況完全不同了,F(xiàn)lexbox 得到了廣泛的支持,大大的減少了我們的開(kāi)發(fā)工作,同時(shí)也為我們提供了更多的可能性。
有人可能會(huì)說(shuō),現(xiàn)在 CSS3 這么普及,制作一個(gè)網(wǎng)站 header 不是很容易么 ?? 并非如此,因?yàn)橛幸恍┯腥さ奶魬?zhàn)需要解決,在本文中我們會(huì)介紹其中的幾種。
首先,這里所說(shuō)的網(wǎng)站 Header
是用戶訪問(wèn)網(wǎng)站時(shí)首先看到的內(nèi)容之一。 通常,它包含logo或網(wǎng)站名稱以及導(dǎo)航鏈接,如下所示:
不管 Header 的視覺(jué)設(shè)計(jì)如何,關(guān)鍵元素都是logo
和導(dǎo)航
。
當(dāng) flexbox 應(yīng)用于 Header 元素時(shí),它將使所有子項(xiàng)目在同一行中。然后,你所需要做的就是應(yīng)用justify-content
來(lái)分配它們之間的間距。
html
<header class="site-header"> <a href="#" class="brand">Brand</a> <nav class="nav"></nav> </header>
css
.site-header { display: flex; justify-content: space-between; align-items: center; }
很簡(jiǎn)單,對(duì)吧?對(duì)于這樣的用例,是的,可能會(huì)比這更復(fù)雜。
在上面的 lago
和 nav
外沒(méi)有包含一層 wrapper
,這在大屏幕可能會(huì)出現(xiàn)問(wèn)題。
從上可以看到第一個(gè)Header
太寬了,因?yàn)樗鼪](méi)有內(nèi)部 wrapper
相比第一個(gè),第二個(gè)看起來(lái)好多了。所以,我們可以對(duì) HTML 進(jìn)行如下調(diào)整。
<header class="site-header"> <div class="wrapper site-header__wrapper"> <a href="#" class="brand"><img src="logo.svg" alt="brand" /></a> <nav class="nav"></nav> </div> </header>
flexbox
應(yīng)該移動(dòng)到.site-header__wrapper
元素中。
.site-header__wrapper { display: flex; justify-content: space-between; align-items: center; }
當(dāng)屏幕很小的時(shí)候,可以水平滾動(dòng)。見(jiàn)下圖
如果沒(méi)有設(shè)置flex-wrap: wrap
,當(dāng)屏幕過(guò)小的時(shí)候就會(huì)出現(xiàn)水平滾動(dòng),如果不想這樣,可以加上 flex-wrap: wrap` ?。
我喜歡使用flexbox的原因是它可以很容易地處理 header 設(shè)計(jì)的多種變化。基于前面的 header 設(shè)計(jì),我擴(kuò)展了 header 元素的一些選項(xiàng),如添加按鈕、搜索輸入和更改子項(xiàng)目的順序。
假設(shè)我想要在導(dǎo)航鏈接旁邊添加了一個(gè)按鈕。這應(yīng)該如何處理?我們應(yīng)該把它作為鏈接添加到導(dǎo)航欄中嗎?還是應(yīng)該和導(dǎo)航分開(kāi)?我更喜歡這樣做。
<header class="site-header"> <div class="wrapper site-header__wrapper"> <a href="#" class="brand"><img src="logo.svg" alt="brand" /></a> <nav class="nav"></nav> <a href="/track-shipment" class="button">Track</a> </div> </header>
這種情況下,我們不能在用 justify-content: space-between
來(lái)處理間隙,相反,我會(huì)在 nav
元素上使用 margin-left: auto
,
這樣,它就會(huì)自動(dòng)向右靠齊。
將導(dǎo)航和 track 按鈕分開(kāi)對(duì)于移動(dòng)設(shè)備非常有用,因?yàn)槲覀冃枰A粼摪粹o并在其旁邊顯示一個(gè)移動(dòng)切換按鈕。
與第一個(gè)變化類似,這個(gè)變化增加了一個(gè)搜索輸入,占用了剩余的可用空間。對(duì)于flexbox,這可以通過(guò)使用flex
屬性來(lái)實(shí)現(xiàn)。
html
<header class="site-header"> <div class="wrapper site-header__wrapper"> <a href="#" class="brand"><img src="logo.svg" alt="brand" /></a> <div class="search"></div> <nav class="nav"></nav> <a href="/track-shipment" class="button">Track</a> </div> </header>
css
.search { flex: 1; }
現(xiàn)在,搜索輸入將填充 brand
和nav
之間的可用空間。 但是,這有一些限制。 在較小的視口上,header 將如下所示:
搜索輸入寬度不應(yīng)小于此寬度,因?yàn)檫@樣很難輸入和查看全文。 下面有兩種解決方案:
我更喜歡第二種解決方案,因?yàn)樗粫?huì)過(guò)早隱藏導(dǎo)航。 一般來(lái)說(shuō),如果元素不影響布局,我會(huì)盡量避免隱藏它。
對(duì)于這個(gè)示例,HTML標(biāo)記是相同的,但是 header 里的元素順序是不同的。我們?nèi)绾尾拍茏龅竭@一點(diǎn)? 你可能想到用 order
屬性來(lái)解決這個(gè)問(wèn)題 ?
html
<header class="site-header"> <div class="wrapper site-header__wrapper"> <a href="#" class="brand"><img src="logo.svg" alt="brand" /></a> <nav class="nav"></nav> <a href="/track-shipment" class="button">Track</a> </div> </header>
css
.site-header { display: flex; justify-content: space-between; } .nav { order: -1; }
這樣有個(gè)問(wèn)題,間隔空間不會(huì)使 logo 居中,它只是分散項(xiàng)目之間的空間。
解決方案是給每個(gè)子項(xiàng)一個(gè)flex: 1
,這將在它們之間分配可用空間。
.brand, .nav, .button { flex: 1; }
這樣,由于flex: 1
,按鈕元素變寬了, 解決此問(wèn)題的唯一方法是將其包裹到另一個(gè)元素中。
HTML
<header class="site-header"> <div class="wrapper site-header__wrapper"> <a href="#" class="brand"><img src="logo.svg" alt="brand" /></a> <nav class="nav"></nav> <div class="button-wrapper"> <a href="/track-shipment" class="button">Track</a> </div> </div> </header>
這樣,我們就可以將下面的logo
和按鈕居中。
.logo { text-align: center; } /* 不要介意這里的命名,這只是出于演示*/ .button-wrapper { text-align: end; /* end 等同于LTR語(yǔ)言中的right */ }
但是,如果添加了更多導(dǎo)航鏈接,這種方法很容易失敗。我們需要確保導(dǎo)航鏈接的數(shù)量不會(huì)超過(guò)特定的限制。下面一個(gè)logo
偏離中心的例子 ?:
正如在上圖中看到的,logo沒(méi)有居中。所以要記住這一點(diǎn),以避免這種意想不到的問(wèn)題 ?。
如果某個(gè)元素需要在移動(dòng)設(shè)備上占據(jù)整個(gè)寬度(不能隱藏的重要導(dǎo)航),我會(huì)使用flex-basis: 100%
?。
從上面的模型看,做起來(lái)可能很簡(jiǎn)單。 實(shí)際上不是。 通常,header
可能有一個(gè)內(nèi)部間距(padding
),當(dāng)我們強(qiáng)制某項(xiàng)占據(jù)全部寬度時(shí),除非清除padding
,否則它不會(huì)生效。 但是,刪除padding
不切實(shí)際,因?yàn)樗鼘⒂绊懺O(shè)計(jì)中的其他元素 ?。
下面解決此問(wèn)題的一種解決方法 ?:
將flex: 1 0 100%
添加到導(dǎo)航元素。
如有需要,請(qǐng)更改其order
。 有時(shí),可能還有其他元素,我們想確保導(dǎo)航是最后一個(gè)。
加上一個(gè)等于寬度等于 padding
的負(fù) margin
,這也會(huì)讓導(dǎo)航占據(jù)整個(gè)寬度。
在導(dǎo)航中添加 padding,這會(huì)增加一些適當(dāng)?shù)目臻g。
最后,使用了justify-content: center
將導(dǎo)航項(xiàng)居中(不重要)
.nav { flex: 1 0 100%; /* [1] */ order: 2; /* [2] */ margin: 1rem -1rem -1rem -1rem; /* [3] */ padding: 1rem; /* [4] */ display: flex; /* [5] */ justify-content: center; /* [5] */ }
著 Chrome 和 Firefox 支持flex gap
屬性,現(xiàn)在在flex項(xiàng)目之間添加間距比以往任何時(shí)候都容易??紤]以下標(biāo)題
要做到上圖的高亮間距,只需將gap: 1rem
添加到flex父節(jié)點(diǎn)。沒(méi)有了gap
,我們還是需要用舊的方式來(lái)間隔 ?。
/* 老的方式 */ .brand { margin-right: 1rem; } .sign-in { margin-right: 1rem; } /* 新的方式 */ .site-header { /* Other flexbox styles */ gap: 1rem; }
關(guān)于“如何使用CSS Flexbox構(gòu)建網(wǎng)站標(biāo)題”這篇文章就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,使各位可以學(xué)到更多知識(shí),如果覺(jué)得文章不錯(cuò),請(qǐng)把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。