整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線：
站使用單頁(yè)設(shè)計(jì)還是多頁(yè)設(shè)計(jì)？這篇文章幫你理智分析，enjoy~
對(duì)于許多網(wǎng)頁(yè)設(shè)計(jì)師而言，是選擇單頁(yè)面還是多頁(yè)面的設(shè)計(jì)，可能會(huì)非常的棘手。隨著移動(dòng)端和社交媒體的興起，簡(jiǎn)單快速響應(yīng)迅速的單頁(yè)網(wǎng)站，成為了目前網(wǎng)頁(yè)設(shè)計(jì)的趨勢(shì)。另一方面，傳統(tǒng)的多頁(yè)設(shè)計(jì)也因其廣泛的認(rèn)知，而被廣大用戶所認(rèn)可。
所以，真正要在兩者之間做取舍，并不容易。單頁(yè)和多頁(yè)式的設(shè)計(jì)哪個(gè)更好，影響因素很多。網(wǎng)站的內(nèi)容如何鋪排，導(dǎo)航如何運(yùn)作，整體的策略和需求，出發(fā)點(diǎn)，都會(huì)影響到選擇的決策。不過(guò)，內(nèi)容始終是最核心的影響因素，從內(nèi)容入手，分析哪種導(dǎo)航，哪種布局更合適，是一種合理的策略。
當(dāng)然，具體怎么做，看下去，這篇文章會(huì)給你答案。
單頁(yè)網(wǎng)站，顧名思義，指的是網(wǎng)站本身并沒(méi)有采用多頁(yè)式的布局，而是將內(nèi)容都放置在單個(gè)頁(yè)面上，諸如我們常見(jiàn)的「關(guān)于」「聯(lián)系我們」等分頁(yè)都是不存在單獨(dú)分頁(yè)的。
正如 Awwwards 所解釋的那樣，單頁(yè)式網(wǎng)站將內(nèi)容完全整合在一頁(yè)當(dāng)中，使得整個(gè)體驗(yàn)更加流暢。用戶借助單頁(yè)內(nèi)的導(dǎo)航同樣可以快速定位，滾動(dòng)瀏覽也很容易。
單頁(yè)網(wǎng)站在為用戶提供內(nèi)容的時(shí)候，其信息和內(nèi)容都是經(jīng)過(guò)篩選和管控的，確保更適宜閱讀和瀏覽。這也是為什么絕大多數(shù)的產(chǎn)品頁(yè)面、作品集和事件相關(guān)的頁(yè)面會(huì)采用單頁(yè)設(shè)計(jì)。在這樣的情況下使用單頁(yè)設(shè)計(jì)能夠最大程度降低信息噪音的影響，讓用戶專(zhuān)注于最重要的內(nèi)容。
為什么那么多人會(huì)選擇單頁(yè)設(shè)計(jì)呢？的確，單頁(yè)網(wǎng)站更容易理解，拆分出來(lái)的區(qū)塊也不算多，用戶也很容易消化。
單頁(yè)設(shè)計(jì)更容易直觀地呈現(xiàn)整個(gè)用戶歷程。不需要額外的頁(yè)面加持，訪客可以直觀而清晰地感知到整個(gè)信息流，如果呈現(xiàn)故事的話，起承轉(zhuǎn)合是非常的順暢的呈現(xiàn)。
單頁(yè)設(shè)計(jì)的另外一個(gè)優(yōu)點(diǎn)，是交互足夠簡(jiǎn)單。研究表面，單頁(yè)網(wǎng)站比多頁(yè)網(wǎng)站的轉(zhuǎn)化率要高37.5%，用戶可以更快地瀏覽，更快地獲取信息，不會(huì)因?yàn)轫?yè)面和復(fù)雜的交互而分心。
單頁(yè)式網(wǎng)站在移動(dòng)端上的優(yōu)勢(shì)也更加明顯。在小屏幕匹配上更加精簡(jiǎn)直觀的內(nèi)容，加上簡(jiǎn)單而自然的滾動(dòng)交互，用戶體驗(yàn)可謂是輕松而舒適。
但是，這還不是全部。設(shè)計(jì)師從中同樣獲得不少好處：再也不用增加來(lái)回跳轉(zhuǎn)的鏈接和頁(yè)面了，工作量沒(méi)那么大，頁(yè)面功能也更容易實(shí)現(xiàn)，也便于迭代和維護(hù)。
單頁(yè)網(wǎng)站的缺點(diǎn)和優(yōu)點(diǎn)同樣突出。單頁(yè)網(wǎng)站的缺陷主要體現(xiàn)在幾個(gè)不同的方面。
單頁(yè)網(wǎng)站在 SEO 上的優(yōu)勢(shì)并不大。事實(shí)上，在網(wǎng)站排名這個(gè)事情上，單頁(yè)網(wǎng)站先天就競(jìng)爭(zhēng)力不足，這也導(dǎo)致借由搜索引擎進(jìn)入網(wǎng)站的打開(kāi)率相對(duì)較低。由于內(nèi)容較少，目標(biāo)關(guān)鍵詞在單頁(yè)網(wǎng)站上常常會(huì)被忽略掉。
另外，單頁(yè)網(wǎng)站也不是成長(zhǎng)型品牌在設(shè)計(jì)網(wǎng)站時(shí)候的首選，因?yàn)樗臄U(kuò)展性是比較有限的。正如同我們所看到的那樣，單頁(yè)網(wǎng)站的關(guān)注度相對(duì)較低，不適合大量?jī)?nèi)容的、信息結(jié)構(gòu)復(fù)雜的網(wǎng)站來(lái)使用。因此，如果你正在運(yùn)營(yíng)一個(gè)不大的網(wǎng)站，但是有計(jì)劃進(jìn)行多方面拓展的話，盡量選擇多頁(yè)網(wǎng)站設(shè)計(jì)。
最后，網(wǎng)站本身通常只會(huì)有一個(gè) URL地址。這本身并不存在問(wèn)題，可是當(dāng)你需要借助諸如 Google Analytics 來(lái)分析網(wǎng)站數(shù)據(jù)的時(shí)候，內(nèi)容并不是通過(guò)鏈接來(lái)區(qū)分的，這使得你所獲得分析數(shù)據(jù)是非常有限的。
多頁(yè)網(wǎng)站包含有多個(gè)子頁(yè)面。與單頁(yè)網(wǎng)站不同，多頁(yè)網(wǎng)站的設(shè)計(jì)中需要借助導(dǎo)航來(lái)承載不同頁(yè)面的鏈接。
多頁(yè)網(wǎng)站幾乎能夠承載所有類(lèi)型的網(wǎng)站項(xiàng)目，諸如 Amazon 這樣的電商網(wǎng)站，諸如 Atlassian 這樣的儀表盤(pán)式的網(wǎng)站，也可以滿足 Lynda 這樣的在線學(xué)習(xí)網(wǎng)站的需求。
和單頁(yè)網(wǎng)站相比，多頁(yè)面的網(wǎng)站的優(yōu)點(diǎn)主要體現(xiàn)在三個(gè)方面：
首先，多頁(yè)面網(wǎng)站有著明顯更強(qiáng)的拓展性。根據(jù)需求創(chuàng)建幾乎任意數(shù)量的子頁(yè)面，設(shè)計(jì)師能夠通過(guò)整合來(lái)創(chuàng)造出可用的導(dǎo)航系統(tǒng)。諸如電商網(wǎng)站，會(huì)采用一個(gè)大型的自定義導(dǎo)航菜單，搭配上搜索框，用戶可以借此抵達(dá)幾乎每一個(gè)頁(yè)面和產(chǎn)品。當(dāng)然，值得注意的是，導(dǎo)航的設(shè)計(jì)應(yīng)該取決于網(wǎng)站的縱深，這個(gè)需要設(shè)計(jì)師仔細(xì)衡量和把控。
其次，多頁(yè)面網(wǎng)站的導(dǎo)航流程，更容易遵循。多頁(yè)面的網(wǎng)站設(shè)計(jì)早在90年代就已經(jīng)形成了，用戶對(duì)于這類(lèi)網(wǎng)站的使用方式早已熟悉，它們的使用已經(jīng)成為一種約定俗成的模式，遵循即可。
最后，多頁(yè)面的站點(diǎn)在 SEO 上有著更多的功能和突出的優(yōu)勢(shì)。我們都能確定，多頁(yè)面的網(wǎng)站比單頁(yè)網(wǎng)站更容易承載更多的內(nèi)容，在搜索引擎優(yōu)化上也有更多的潛能可供挖掘，可以承載更加多樣的營(yíng)銷(xiāo)策略。
事物總是具有兩面性的。多頁(yè)網(wǎng)站的缺點(diǎn)也是不能回避的問(wèn)題。
多頁(yè)面網(wǎng)站需要更加頻繁、工作量更大的維護(hù)，這無(wú)論是對(duì)于設(shè)計(jì)團(tuán)隊(duì)、開(kāi)發(fā)團(tuán)隊(duì)還是內(nèi)容團(tuán)隊(duì)而言，都是頗為繁重的工作。在選擇單頁(yè)面還是多頁(yè)面的網(wǎng)站的時(shí)候，需要考慮內(nèi)容的體量和工作量，作出合理的衡量。正如同 Undsgn 所說(shuō)：「更新和維護(hù)單個(gè)頁(yè)面比處理多個(gè)頁(yè)面要容易得多，基本的數(shù)學(xué)規(guī)律你是違反不了的！」尤其重要的是，追求數(shù)量而輕視質(zhì)量對(duì)于企業(yè)而言是極為不利的。
另外一個(gè)需要注意的問(wèn)題就是網(wǎng)的跳出率。根據(jù)《Search Engine Journal》的統(tǒng)計(jì)，擁有大量?jī)?nèi)容的網(wǎng)站相對(duì)而言加載速度會(huì)更慢，用戶注意力更容易被分散，這會(huì)導(dǎo)致網(wǎng)站的跳出率提升。雖然并非每個(gè)多頁(yè)面網(wǎng)站都會(huì)被內(nèi)容所拖累，但是內(nèi)容和信息量的增加是必然會(huì)帶來(lái)注意力的分散，這個(gè)是需要注意的。
最后，多頁(yè)面網(wǎng)站設(shè)計(jì)在移動(dòng)端上，也沒(méi)有單頁(yè)設(shè)計(jì)那么友好。和單頁(yè)不同，多頁(yè)面網(wǎng)站即使是通過(guò)響應(yīng)式設(shè)計(jì)在移動(dòng)端上呈現(xiàn)，在交互和界面上所耗費(fèi)的時(shí)間也是更長(zhǎng)的，所達(dá)到的效果卻不一定理想。你會(huì)為了移動(dòng)端上的一致性，而犧牲桌面端上的一些設(shè)計(jì)么？
其實(shí)今天的文章，我們的目標(biāo)是通過(guò)闡述單頁(yè)設(shè)計(jì)和多頁(yè)面設(shè)計(jì)之間的差異，讓你能夠在設(shè)計(jì)上作出更好的決策。簡(jiǎn)單總結(jié)一下：當(dāng)你的網(wǎng)站功能比較集中，關(guān)注度也較低的時(shí)候，單頁(yè)設(shè)計(jì)會(huì)非常有用，它也是移動(dòng)端網(wǎng)頁(yè)的首選方案。如果你需要復(fù)雜的、多功能、可拓展式的網(wǎng)站，那么還是采用傳統(tǒng)的多頁(yè)式設(shè)計(jì)，結(jié)合合理的導(dǎo)航設(shè)計(jì)，并且加入可靠的 SEO策略。
選擇單頁(yè)還是多頁(yè)，很多時(shí)候需要靈活應(yīng)變，因地制宜，內(nèi)容始終是網(wǎng)站的靈魂，多考慮用戶打開(kāi)網(wǎng)站時(shí)候的使用場(chǎng)景，也許整個(gè)局面就很明朗了。
原文作者 : Justinmind
譯者/編輯 : 陳子木
譯文地址：https://www.uisdc.com/single-page-vs-multi-page
本文由 @陳子木 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。
題圖來(lái)自 Pexels，基于 CC0 協(xié)議
天我們學(xué)習(xí)的內(nèi)容有：過(guò)渡，動(dòng)畫(huà)，轉(zhuǎn)換，伸縮盒子。
可以說(shuō)今天學(xué)習(xí)的內(nèi)容都是重量級(jí)的大佬，學(xué)好了，使用css3做出酷炫的效果 So Easy！~~
1.過(guò)渡
在css3中，有一個(gè)屬性可以設(shè)置過(guò)渡效果。
它就是transition，所謂的過(guò)渡效果，指的就是以動(dòng)畫(huà)的形式慢慢演化樣式屬性變化的過(guò)程。
A.案例：通過(guò)transition設(shè)置焦點(diǎn)過(guò)渡效果
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>div{width: 200px;height: 200px;margin:200px;background: url(girl.jpg);border-radius:50%;transition:all 1s linear 0.3s;cursor: pointer;}div:hover{box-shadow: 0px 0px 20px blue;}</style></head><body><div></div></body></html>
注意頁(yè)面中的代碼：
第一，我們給div添加了一個(gè)hover偽類(lèi)樣式，當(dāng)我們鼠標(biāo)懸停在div上方的時(shí)候，會(huì)給div盒子添加一個(gè)藍(lán)色的盒子陰影。
第二，我們給div盒子添加了一個(gè)transition樣式，設(shè)置的值為：all 1s linear 0.3s;
這四個(gè)數(shù)據(jù)分別對(duì)應(yīng)
transition-property(需要過(guò)渡的屬性)：如果設(shè)置為all表示所有樣式屬性都需要過(guò)渡。
transition-duration(過(guò)渡的時(shí)間):以秒作為單位，設(shè)置過(guò)渡的時(shí)間
transition-timing-function(過(guò)渡的方式):常用的有l(wèi)inear(勻速)，ease(先慢后快)，ease-in，ease-out，ease-in-out等
transition-delay(延遲的時(shí)間):以秒作為單位進(jìn)行延遲，延遲之后開(kāi)始進(jìn)行過(guò)渡效果。
所以，我們通過(guò)transition這個(gè)復(fù)合屬性設(shè)置的過(guò)渡效果為：
all:需要過(guò)渡所有的屬性
1s:過(guò)渡的時(shí)間為1秒
linear:勻速過(guò)渡
0.3s:在延遲0.3秒之后開(kāi)始過(guò)渡動(dòng)畫(huà)。
如果大家理解了上面的描述，那么也就不難理解咱們鼠標(biāo)放到div上之后，為啥會(huì)慢慢出現(xiàn)藍(lán)色的光暈了，就是因?yàn)樵蹅兲砑恿诉^(guò)渡，所以，慢慢的就會(huì)給盒子添加陰影效果。
2.動(dòng)畫(huà)：
在學(xué)習(xí)完了過(guò)渡之后，發(fā)現(xiàn)咱們可以使用transition去以動(dòng)畫(huà)的形式展示樣式的改變以及變化的過(guò)程，這可以幫助我們來(lái)實(shí)現(xiàn)一些過(guò)渡的動(dòng)畫(huà)。
但是，有的時(shí)候，我們的需求會(huì)更加的復(fù)雜，要求會(huì)更加的多變，那么，transition可能就無(wú)法滿足我們的需要了，我們需要有更加炫酷，復(fù)雜的效果呈現(xiàn)。
那么，動(dòng)畫(huà)animation就可以滿足我們的需要。
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>@keyframes moveAndChange{0%{left:0px;top:0px;}25%{left:200px;top:200px;background:green;border-radius: 0;}50%{left:400px;top:200px;background:blue;border-radius: 50%;}75%{left:400px;top:0px;background:#ccc;border-radius: 0;}100%{left:0px;top:0px;background:red;border-radius: 50%;}}div{margin:200px;width: 200px;height: 200px;position: absolute;background:red;border-radius:50%;animation: moveAndChange 5s linear 0.5s infinite normal;}</style></head><body><div></div></body></html>
代碼效果如下：
同樣，讓我們來(lái)關(guān)注編寫(xiě)的代碼：
1.在樣式中，首先我們使用@keyframes 來(lái)定義了一個(gè)復(fù)雜的動(dòng)畫(huà)，在css3中，新增了@keyframes可以來(lái)幫助我們添加動(dòng)畫(huà)。代碼如下：
/*動(dòng)畫(huà)的名字叫做moveAndChange*/
@keyframes moveAndChange{
/*動(dòng)畫(huà)最初的時(shí)候，將left設(shè)置為0px，top設(shè)置為0px*/
0%{
left:0px;
top:0px;
}
/*當(dāng)動(dòng)畫(huà)進(jìn)行到25%的時(shí)候，使用動(dòng)畫(huà)將left過(guò)渡到200px，top過(guò)渡到200px，
背景顏色過(guò)渡為綠色，圓角過(guò)渡為0(無(wú)圓角)*/
25%{
left:200px;
top:200px;
background:green;
border-radius: 0;
}
/*當(dāng)動(dòng)畫(huà)進(jìn)行到50%的時(shí)候，使用動(dòng)畫(huà)將left過(guò)渡到400px，top過(guò)渡到200px，
背景顏色過(guò)渡為藍(lán)色，圓角過(guò)渡為50%(正圓)*/
50%{
left:400px;
top:200px;
background:blue;
border-radius: 50%;
}
/*當(dāng)動(dòng)畫(huà)進(jìn)行到75%的時(shí)候，使用動(dòng)畫(huà)將left過(guò)渡到400px，top過(guò)渡到0，
背景顏色過(guò)渡為灰色，圓角過(guò)渡為0(無(wú)圓角)*/
75%{
left:400px;
top:0px;
background:#ccc;
border-radius: 0;
}
/*當(dāng)動(dòng)畫(huà)結(jié)束的時(shí)候，使用動(dòng)畫(huà)將left過(guò)渡到0x，top過(guò)渡到0px，
背景顏色過(guò)渡為紅色，圓角過(guò)渡為50%(正圓)*/
100%{
left:0px;
top:0px;
background:red;
border-radius: 50%;
}
}
這是一個(gè)比較復(fù)雜的動(dòng)畫(huà)效果，可以發(fā)現(xiàn)，它通過(guò)百分比的形式將一個(gè)完整的動(dòng)畫(huà)拆分成了5個(gè)部分，每個(gè)部分都有不同的樣式效果，而當(dāng)我們采用該動(dòng)畫(huà)的元素就會(huì)按照設(shè)置的順序和樣式效果進(jìn)行動(dòng)畫(huà)的過(guò)渡和展示。
2.上面我們只是通過(guò)@keyframes創(chuàng)建了一個(gè)動(dòng)畫(huà)，我們還需要通過(guò)特定的語(yǔ)法來(lái)使用這個(gè)動(dòng)畫(huà)。
就是下面這句代碼了：
animation: moveAndChange 5s linear 0.5s infinite normal;
它是一個(gè)復(fù)合屬性，設(shè)置了6個(gè)值，分別對(duì)應(yīng)：
animation-name(設(shè)置動(dòng)畫(huà)的名稱(chēng))：用來(lái)設(shè)置動(dòng)畫(huà)的名字，我們這里寫(xiě)的是moveAndChange ，也就是說(shuō)我們就是要使用我們剛剛創(chuàng)建的動(dòng)畫(huà)。
animation-duration(設(shè)置整個(gè)動(dòng)畫(huà)的時(shí)間):以秒作為單位，我們這里寫(xiě)的是5s，表示整個(gè)動(dòng)畫(huà)的時(shí)間為5秒
animation-timing-function(設(shè)置播放動(dòng)畫(huà)的方式)：播放動(dòng)畫(huà)的方式，常用的有l(wèi)inear(勻速)，ease(先慢后快)，ease-in，ease-out，ease-in-out等，我們使用的是linear勻速播放動(dòng)畫(huà)。
animation-delay(設(shè)置動(dòng)畫(huà)的延遲):以秒作為單位，我們寫(xiě)的是0.5s，表示延遲0.5秒之后開(kāi)始播放動(dòng)畫(huà)。
animation-iteration-count(設(shè)置動(dòng)畫(huà)播放的次數(shù)):播放動(dòng)畫(huà)的次數(shù)，我們這里寫(xiě)的是infinite ，表示動(dòng)畫(huà)將會(huì)被播放無(wú)限次，如果寫(xiě)數(shù)字，那么就會(huì)播放數(shù)字對(duì)應(yīng)的次數(shù)。
animation-direction(設(shè)置是否反向播放動(dòng)畫(huà))：我們寫(xiě)的是normal，表示正常播放動(dòng)畫(huà)，如果寫(xiě)的是
alternate則表示要反向播放動(dòng)畫(huà)，大家也可以自己試一試這個(gè)效果。
最終，我們通過(guò)@keyframes創(chuàng)建動(dòng)畫(huà)，通過(guò)animation設(shè)置動(dòng)畫(huà)，成功完成了這個(gè)復(fù)雜的動(dòng)畫(huà)效果。
3.轉(zhuǎn)換
在css3中，我們通過(guò)transform屬性可以設(shè)置元素的轉(zhuǎn)換效果，具體的效果如下：
A.平移
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>body{background:pink;}div{width: 200px;height: 200px;position: absolute;background: green;left:0px;top:0px;transform: translate(300px,300px);}</style></head><body><div></div></body></html>
代碼效果如下：
如上圖所示，本來(lái)div盒子的位置是left:0,top:0;
但是我們通過(guò)transform: translate(300px,300px);將盒子進(jìn)行了偏移，所以，盒子的位置發(fā)生了改變。
B.旋轉(zhuǎn)
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>body {background: pink;}div {width: 200px;height: 200px;margin: 200px;position: absolute;background: green;left: 0px;top: 0px;transform: rotate(45deg);}</style></head><body><div></div></body></html>
代碼效果如下：
如上圖所示，本來(lái)div盒子應(yīng)該是四四方方的。
但是，經(jīng)過(guò)我們的代碼transform: rotate(45deg); //deg為單位，表示度數(shù)。
進(jìn)行了45度的旋轉(zhuǎn)之后，呈現(xiàn)出來(lái)的就是一個(gè)菱形的盒子了，旋轉(zhuǎn)的正方向?yàn)轫槙r(shí)針，負(fù)方向?yàn)槟鏁r(shí)針。
C.縮放
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>body {background: pink;}div {width: 200px;height: 200px;margin: 200px;position: absolute;background: green;left: 0px;top: 0px;transform: scale(0.5,0.25);}</style></head><body><div></div></body></html>
代碼效果如下：
如上圖所示，本來(lái)盒子的寬高為200*200,而我們通過(guò)transform: scale(0.5,0.25);進(jìn)行的縮放
scale的第一個(gè)參數(shù)為0.5,表示橫向縮小為0.5倍
scale的第二個(gè)參數(shù)為0.25，表示縱向縮小為0.25倍。
scale的參數(shù)如果為1，則表示不進(jìn)行任何縮放，小于1就是做縮小，而大于1表示做放大。
小結(jié)：transform轉(zhuǎn)換中其實(shí)還包含了skew(傾斜)，matrix(矩陣轉(zhuǎn)換)，相對(duì)來(lái)說(shuō)用到的不是特別多，所以在本文中我們便不再做介紹。
4.flex布局
Flex布局，可以簡(jiǎn)便、完整、響應(yīng)式地實(shí)現(xiàn)各種頁(yè)面布局。
Flex是Flexible Box的縮寫(xiě)，翻譯成中文就是“彈性盒子”，用來(lái)為盒裝模型提供最大的靈活性。任何一個(gè)容器都可以指定為Flex布局。
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>div{box-sizing: border-box;}.parent {width: 600px;height: 200px;margin: 100px;position: absolute;background: green;left: 0px;top: 0px;display: flex;justify-content: flex-start}.parent div{width: 20%;border:1px solid #ccc;background:pink;}</style></head><body><div><div>1</div><div>2</div><div>3</div><div>4</div></div></body></html>
代碼效果如下：
如圖所示，咱們通過(guò)display:flex將.parent元素設(shè)置為了flex盒子，那么子元素將會(huì)按照justify-content設(shè)置的方式進(jìn)行元素的排列，目前看來(lái)，和我們沒(méi)有設(shè)置flex盒子的效果是一致的。
接下來(lái)我們更改一下，將justify-content設(shè)置為flex-end，效果如下圖所示：
所以我們就應(yīng)該發(fā)現(xiàn)，flex-start是讓所有的子元素從父元素的左側(cè)開(kāi)始排列
而flex-end是讓所有的子元素從元素的右側(cè)開(kāi)始排列。
我們?cè)賮?lái)更改一下，將justify-content設(shè)置為center，效果如下圖所示：
更厲害了，子元素在父盒子的中央位置排列顯示了。
然后，我們?cè)賹ustify-content設(shè)置為space-around，效果如下圖所示：
它是平均分配的形式為每一個(gè)子元素設(shè)置了間距，但是看起來(lái)有點(diǎn)變扭。
所以我們推薦將justify-content設(shè)置為space-between，效果如下圖：
我們還可以通過(guò)flex-wrap來(lái)設(shè)置子元素是否換行顯示，以及flex-direction設(shè)置子元素排列的順序。
這兩個(gè)屬性可以設(shè)置的值如下：
flex-wrap: nowrap;//不換行，會(huì)自動(dòng)收縮
flex-wrap: warp;//換行，會(huì)自動(dòng)收縮
flex-wrap: warp-reverse;//反轉(zhuǎn)，從默認(rèn)的從上到下排列反轉(zhuǎn)為從下到上。
flex-direction:row; //從左至右一行一行進(jìn)行子元素的排列
flex-direction:column; //從上到下一列一列進(jìn)行子元素的排列
flex-direction:row-reverse; //從右至左一行一行進(jìn)行子元素的排列
flex-direction:column-reverse; //從下到上一列一列進(jìn)行子元素的排列
案例代碼如下：
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>div{box-sizing: border-box;}.parent {width: 600px;height: 200px;margin: 100px;position: absolute;background: green;left: 0px;top: 0px;display: flex;justify-content: space-between;flex-wrap: nowrap;flex-direction: row-reverse;}.parent div{width: 20%;border:1px solid #ccc;background:pink;}</style></head><body><div><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div></div></body></html>
我們?cè)O(shè)置了flex-wrap: nowrap;（不換行，壓縮所有的子元素在一行中顯示），以及flex-direction: row-reverse;（反向排列）
代碼效果如下：
如果設(shè)置為flex-wrap: warp（換行顯示無(wú)法在一行顯示的子元素），則效果如下：
如果將flex-direction: column;,則會(huì)縱向排列元素，效果如下圖：
除了上面的這些給伸縮盒子父元素設(shè)置的樣式之外，我們還可以可以伸縮盒子的子元素設(shè)置flex屬性，用來(lái)設(shè)置平均分配整個(gè)父盒子的空間。
代碼如下：
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>div{box-sizing: border-box;}.parent {width: 600px;height: 200px;margin: 100px;position: absolute;background: green;left: 0px;top: 0px;display: flex;justify-content: space-between;}.parent div{flex:1;width: 20%;border:1px solid #ccc;background:pink;}</style></head><body><div><div>1</div><div>2</div><div>3</div><div>4</div></div></body></html>
效果如下：
如上圖所示，每個(gè)盒子平均分配了父盒子的空間，原本寬度為20%，現(xiàn)在被拉伸了。
除此之外，咱們還可以使用flex屬性進(jìn)行進(jìn)一步的設(shè)置，代碼如下：
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>div{box-sizing: border-box;}.parent {width: 600px;height: 200px;margin: 100px;position: absolute;background: green;left: 0px;top: 0px;display: flex;justify-content: space-between;}.parent div:nth-of-type(1){flex:1;border:1px solid #ccc;background:red;}.parent div:nth-of-type(2){flex:2;border:1px solid #ccc;background:green;}.parent div:nth-of-type(3){flex:2;border:1px solid #ccc;background:blue;}.parent div:nth-of-type(4){flex:1;border:1px solid #ccc;background:pink;}</style></head><body><div><div>1</div><div>2</div><div>3</div><div>4</div></div></body></html>
效果如下圖：
我們分別給四個(gè)子盒子設(shè)置了flex:1 , flex:2, flex:2 ,flex:1.
這是什么意思呢？
四個(gè)flex加起來(lái)一共是6.那么第一個(gè)盒子就占據(jù)整個(gè)父盒子的1/6寬度。
同理，另外三個(gè)盒子分別占據(jù)2/6,2/6,1/6的寬度，所以就形成了我們現(xiàn)在看到的效果。
原文來(lái)源于：黑馬程序員社區(qū)
學(xué)習(xí)資源：
想學(xué)習(xí)css，可以關(guān)注：黑馬程序員頭條號(hào)，后臺(tái)回復(fù)：css
用TRS WCM制作網(wǎng)站的時(shí)候，遇到一個(gè)欄目有多個(gè)子欄目的情況，該如何配置模板呢？信和網(wǎng)站維護(hù)中心，在建站過(guò)程中遇到了類(lèi)似的情況，于是挑選了幾個(gè)用trs wcm制作的網(wǎng)站，分析了下其他網(wǎng)站的模板配置方法。
從中科院和長(zhǎng)沙市政務(wù)門(mén)戶兩個(gè)網(wǎng)站，經(jīng)過(guò)分析兩個(gè)TRS 內(nèi)容協(xié)作平臺(tái)用戶的站點(diǎn)欄目結(jié)構(gòu)，發(fā)現(xiàn)可以對(duì)含有多個(gè)子欄目的父欄目，進(jìn)行跳轉(zhuǎn)到默認(rèn)的第一個(gè)子欄目。
TRS WCM內(nèi)容協(xié)作平臺(tái) 7.0
具體有看的兩家，分別采用了javascript跳轉(zhuǎn)和meta refresh跳轉(zhuǎn)兩種思路。突然感覺(jué)這種解決思路好靈活。
中科院TRS WCM父欄目模板設(shè)置案例：
欄目結(jié)構(gòu)
->資源條件
---->出版物（要設(shè)置模板的父欄目）
-------->期刊
-------->專(zhuān)著
-------->電子雜志
出版物頁(yè)面地址：www.cas.cn/zy/cb/
打開(kāi)后，服務(wù)器響應(yīng)html代碼
中科院TRS WCM父欄目跳轉(zhuǎn)子欄目實(shí)現(xiàn)效果截圖
頁(yè)面通過(guò)javascript跳轉(zhuǎn)到出版物的第一個(gè)子欄目期刊（http://www.cas.cn/zy/cb/qk/）
而上面獲取出版物第一個(gè)子欄目顯示名稱(chēng)和欄目文件夾名稱(chēng)都可以通過(guò)相應(yīng)的置標(biāo)獲得到。
思路很妙。
另一種實(shí)現(xiàn)思路來(lái)看長(zhǎng)沙市TRS內(nèi)容協(xié)作平臺(tái)設(shè)置多個(gè)子欄目的父欄目模板案例：
欄目結(jié)構(gòu)
->信息公開(kāi)目錄
---->工作動(dòng)態(tài)（要設(shè)置模板的父欄目）
-------->政務(wù)動(dòng)態(tài)
-------->部門(mén)動(dòng)態(tài)
-------->區(qū)縣動(dòng)態(tài)
工作動(dòng)態(tài)頁(yè)面地址：www.changsha.gov.cn/xxgk/szfxxgkml/gzdt/
打開(kāi)頁(yè)面后，服務(wù)器響應(yīng)代碼為
長(zhǎng)沙市TRS內(nèi)容協(xié)作平臺(tái)某含有子欄目的欄目跳轉(zhuǎn)規(guī)則截圖
通過(guò)meta refresh到默認(rèn)的第一個(gè)子欄目政務(wù)動(dòng)態(tài)欄目。
思路是一樣的，只是更妙。
如果父欄目要設(shè)置專(zhuān)門(mén)的欄目頁(yè)面，那么就不存在上面的情況了。
由此延伸想到，很多其他平臺(tái)建設(shè)子欄目的時(shí)候，也可以采用類(lèi)似的思路。之前見(jiàn)過(guò)很多不同的cms系統(tǒng)，類(lèi)似這種結(jié)構(gòu)的欄目，有不少都是父欄目錄入子欄目第一個(gè)的內(nèi)容，然后子欄目再重復(fù)錄入一遍。而TRS wcm模板制作的這種解決思路，很好的避免了文章多次錄入的問(wèn)題，省去了后期調(diào)整需要要修改多個(gè)地方的麻煩。
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
