前端必須熟悉的幾種布局方式

前端必須熟悉的幾種布局方式

【摘要】前端必須熟悉的幾種布局方式前言最近在準(zhǔn)備整理基礎(chǔ)，準(zhǔn)備跳槽，找個好一點(diǎn)的東家。?記錄學(xué)習(xí)整理的過程，希望能幫到年后跳槽的你，讓我們一起來鞏固基礎(chǔ)吧。

目前在一家國企單位，朝九晚五的生活讓我感到舒適，有大量的時間，做自己喜歡的事。時間久了，我感到了焦慮，由于公司是非互聯(lián)網(wǎng)，開發(fā)也是根據(jù)自己已知技術(shù)去開發(fā)，技術(shù)成長很慢，技術(shù)氛圍沒那么強(qiáng)，想突破一下自己，是該逃離舒適區(qū)了。

本章主要是回顧Flex使用和一些常用布局的寫法。熟悉HTML頁面架構(gòu)和常用布局FlexFlex概念采用Flex布局的元素，稱為Flex容器（flexcontainer），簡稱"容器"。它的所有子元素自動成為容器成員，稱為Flex項(xiàng)目（flexitem），簡稱"項(xiàng)目"。注意：任何一個容器都可以指定為Flex行內(nèi)元素也可以指定為Flex布局，display:inline-flex;Webkit內(nèi)核的瀏覽器，必須加上-webkit前綴。display:-webkit-flex;/Safari/容器默認(rèn)存在兩根軸：水平的主軸（mainaxis）和垂直的交叉軸（crossaxis）。主軸的開始位置（與邊框的交叉點(diǎn)）叫做mainstart，結(jié)束位置叫做mainend；交叉軸的開始位置叫做crossstart，結(jié)束位置叫做crossend。項(xiàng)目默認(rèn)沿主軸排列。單個項(xiàng)目占據(jù)的主軸空間叫做mainsize，占據(jù)的交叉軸空間叫做crosssize。容器屬性作用于父容器的屬性屬性功能描述flex-direction屬性決定主軸的方向（即項(xiàng)目的排列方向）。flex-wrap默認(rèn)情況下，項(xiàng)目都排在一條線（又稱"軸線"）上。flex-wrap屬性定義，如果一條軸線排不下，如何換行justify-content決定了子元素在主軸的對齊方式。align-items決定了子元素在交叉軸(豎軸）的對齊方式align-content決定了多條軸線的對齊方式。flex-direction該屬性決定了主軸以什么方向排列row（默認(rèn)值）：主軸為水平方向，起點(diǎn)在左端。row-reverse：主軸為水平方向，起點(diǎn)在右端。column：主軸為垂直方向，起點(diǎn)在上沿。column-reverse：主軸為垂直方向，起點(diǎn)在下沿。flex-direction:column;flex-direction:row-reverseflex-direction:row-reverse;flex-wrap該屬性決定了元素是否在一條軸線上，通過指定它的屬性可以子元素?fù)Q行。nowrap:默認(rèn)，不換行。wrap:讓子元素在一條線上有序的排列著，當(dāng)一條線排不下的時候，會換行。wrap-reverse:wrap的反轉(zhuǎn)。flex-wrap:wrap;flex-wrap:wrap-reverse;justify-content該屬性決定了子元素在主軸上的對齊方式屬性：flex-start（默認(rèn)值）：左對齊flex-end：右對齊center：居中space-between：均勻排列每個元素,首個元素放置于起點(diǎn)末尾元素放置于終點(diǎn).間隔：元素個數(shù)n-1space-evenly:均勻排列每個元素,每個元素之間的間隔相等。間隔：元素個數(shù)n+1space-around：每個項(xiàng)目兩側(cè)的間隔相等。所以，項(xiàng)目之間的間隔比項(xiàng)目與邊框的間隔大一倍。justify-content:center;justify-content:flex-end;justify-content:space-between;justify-content:space-around;justify-content:space-evenly;align-items該屬性是讓子元素如何在交叉抽(豎軸)方向上對齊。屬性：flex-start：交叉軸的起點(diǎn)對齊。flex-end：交叉軸的終點(diǎn)對齊。center：交叉軸的中點(diǎn)對齊。baseline:項(xiàng)目的第一行文字的基線對齊。stretch（默認(rèn)值）：如果項(xiàng)目未設(shè)置高度或設(shè)為auto，將占滿整個容器的高度。align-items:flex-end;align-items:center;align-items:baseline;align-items:stretch;align-content該元素定義了多條軸的對齊方式，當(dāng)只有一根軸時，不起作用。屬性：flex-start：與交叉軸的起點(diǎn)對齊。flex-end：與交叉軸的終點(diǎn)對齊。center：與交叉軸的中點(diǎn)對齊。space-between：與交叉軸兩端對齊，軸線之間的間隔平均分布。space-around：每根軸線兩側(cè)的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。stretch（默認(rèn)值）：軸線占滿整個交叉軸。?align-content:flex-start;align-content:flex-end;align-content:center;align-content:space-between;align-content:space-around;作用于子元素的屬性屬性屬性描述order可以將子元素按大小排序，值越小，排名越靠前。flex-grow可以將子元素按一定比例排列，如果子元素值都一樣，那么子元素會等比例排列。flex-shrink如果空間不足時，可以使用它將子元素按比例縮小flex-basis它決定在主軸分配空間之前，項(xiàng)目占主軸的大小。瀏覽器會根據(jù)剩余的空間來，計算它的大小。flex-self它可以指定某個元素和其它元素的排列方式不同。order父容器為flex.時，子元素可以通過order達(dá)到排序的功能，數(shù)值越小，排列最前面。<divclass="main">

<divclass="son1">

</div>

<divclass="son2">

</div>

<divclass="son3">

</div>

</div>

<style>

.main{

width:400px;

height:300px;

border-radius:15px;

display:flex;

justify-items:center;

align-items:center;

background:lightseagreen;

margin:auto;

margin-top:200px;

}

.son1{

width:80px;

height:100px;

border-radius:15px;

margin:10px;

order:1;

background:coral;

}

.son2{

width:80px;

height:100px;

border-radius:15px;

margin:10px;

order:0.2;

background:darkcyan;

}

.son3{

width:80px;

height:100px;

border-radius:15px;

margin:10px;

order:3;

background:gold;

}

</style>flex-grow該屬性用來指定子元素在父容器中按比例指定大小，如果每一項(xiàng)都指定比例相同的話，那么元素會平分排列布局。<divclass="main">

<divclass="son1">

</div>

<divclass="son2">

</div>

<divclass="son3">

</div>

</div><style>

.main{

width:400px;

height:300px;

border-radius:15px;

display:flex;

justify-items:center;

align-items:center;

background:lightseagreen;

margin:auto;

margin-top:200px;

}

.son1{

height:100px;

border-radius:15px;

margin:10px;

flex-grow:2;

background:coral;

}

.son2{

height:100px;

border-radius:15px;

margin:10px;

flex-grow:2;

background:darkcyan;

}

.son3{

height:100px;

border-radius:15px;

margin:10px;

flex-grow:2;

background:gold;

}

</style>flex-shrink該屬性是按比例縮小子元素，默認(rèn)為1，當(dāng)主軸空間不足時，它會按比例縮小。<style>

.main{

width:400px;

height:300px;

border-radius:15px;

display:flex;

justify-items:center;

align-items:center;

background:lightseagreen;

margin:auto;

margin-top:200px;

}

.son1{

width:200px;

height:100px;

border-radius:15px;

margin:10px;

/*縮小5的比例*/

flex-shrink:5;

background:coral;

}

.son2{

width:160px;

height:100px;

border-radius:15px;

margin:10px;

background:darkcyan;

}

.son3{

width:160px;

height:100px;

border-radius:15px;

margin:10px;

background:gold;

}

</style>flex-basis該屬性定義了在分配多余空間之前，項(xiàng)目占據(jù)的主軸空間。瀏覽器根據(jù)這個屬性，計算主軸是否有多余空間。它的默認(rèn)值為auto，即項(xiàng)目的本來大小。.son1{

/*指定了寬度沒有作用，flex-basis決定了占據(jù)主軸多少寬度，

瀏覽器會根據(jù)剩余寬度來計算主軸還有多少寬度*/

width:300px;

height:100px;

border-radius:15px;

margin:10px;

flex-basis:100px;

background:coral;

}

.son2{

width:160px;

height:100px;

border-radius:15px;

margin:10px;

background:darkcyan;

}

.son3{

height:100px;

border-radius:15px;

margin:10px;

flex-basis:100px;

background:gold;

}flex-self該屬性允許單個元素和其它元素不同的排列方式，覆蓋父元素的aligin-items值：flex-start左對齊flex-end右對齊center居中baseline項(xiàng)目的第一行文字的基線對齊。stretch如果項(xiàng)目未設(shè)置高度或設(shè)為auto，將占滿整個容器的高度。.son3{

border-radius:15px;

margin:10px;

flex-basis:100px;

background:gold;

align-self:stretch;

}常用布局全屏布局全局布局由頂部，主體，底部構(gòu)成。通常一般固定頂部和底部高度,主體自適應(yīng)這樣就實(shí)現(xiàn)了全屏布局。可以使用語義化標(biāo)簽，header,mainfooter.下面通過Flex布局來達(dá)到全屏布局的效果。在最外層套一個容器，給容器指定display:flex;在容器中指定子元素的排列方式，flex-direction:column;頂部和底部高度，主體使用flex:1比例來達(dá)到自適應(yīng)。flex是flex-grow、flex-shrink、flex-basis的縮寫flex-grow屬性：定義項(xiàng)目的放大比例，默認(rèn)為0，即如果存在剩余空間，也不放大。flex-shrink屬性：定義了項(xiàng)目的縮小比例，默認(rèn)為1，即如果空間不足，該項(xiàng)目將縮小。flex-basis屬性：定義了在分配多余空間之前，項(xiàng)目占據(jù)的主軸空間（mainsize）。瀏覽器根據(jù)這個屬性，計算主軸是否有多余空間。它的默認(rèn)值為auto，即項(xiàng)目的本來大小。<divclass="full">

<header>導(dǎo)航</header>

<main>主體內(nèi)容</main>

<footer>底部</footer>

</div>*{

margin:0;

padding:0;

}

.full{

width:100%;

height:100vh;

display:flex;

flex-direction:column;

}

header{

height:60px;

font-weight:900;

color:white;

text-align:center;

background:darkcyan;

}

main{

flex:1;

align-items:center;

font-weight:900;

color:white;

text-align:center;

background:orange;

}

footer{

height:60px;

font-weight:900;

color:white;

text-align:center;

background:rgb(48,40,163);

}兩列布局最經(jīng)典的系統(tǒng)管理布局兩列布局.它主要由是兩列都固定高度，左端指定寬度,右端通過flex:1來達(dá)到自適應(yīng)寬度。<divclass="full">

<divclass="left">

</div>

<divclass="right">

</div>

</div>*{

margin:0;

padding:0;

}

.full{

width:100%;

height:100vh;

display:flex;

flex-wrap:wrap;

}

.left{

width:200px;

height:100vh;

background:rgb(0,140,255);

}

.right{

flex:1;

height:100vh;

background:rgb(158,159,160);

}后臺系統(tǒng)布局我在寫后臺時，布局頁面除了像兩列布局這種的，也會有這種布局，我叫它后臺系統(tǒng)布局?。它的特點(diǎn)：它其實(shí)也是兩列布局，只是它在右端分為頂部和主體兩部分，頂部會放置一些點(diǎn)擊左側(cè)菜單關(guān)聯(lián)的菜單，主體放置點(diǎn)擊菜單顯示的內(nèi)容如何進(jìn)行布局它和兩列布局基本相同，不同點(diǎn)就是它在右端顯示不一樣右端分為主體和頂部，頂部固定高度,主體通過flex:1來達(dá)到自適應(yīng)右端容器通過flex-direction:column;指定子元素按交叉軸(豎軸)排列布局。<divclass="full">

<divclass="left">

</div>

<divclass="right">

<divclass="right-head">

</div>

<divclass="right-main">

</div>

</div>

</div>*{

margin:0;

padding:0;

}

.full{

width:100%;

height:100vh;

display:flex;

/*flex-wrap:wrap;*/

}

.left{

width:200px;

height:100vh;

background:rgb(0,140,255);

}

.right{

height:100vh;

display:flex;

flex:1;

flex-direction:column;

background:rgb(158,159,160);

}

.right-head{

height:80px;

background:cornflowerblue;

}

.right-main{

flex:1;

background:orange;

}居中布局居中布局在我們?nèi)粘戫撁鏁r經(jīng)常用到，場景也比較多，eg：登陸,彈窗Dialog.這里我使用flex來實(shí)現(xiàn)居中布局，flex實(shí)現(xiàn)起來更簡潔，這里就不討論其它實(shí)現(xiàn)方法了。如何進(jìn)行布局通過給父容器的寬度和高度都100%，鋪滿整個屏幕，父容器display為flex,使用justify-content:center;決定子元素在主軸的方向上怎么顯示，在通過align-items:center;來決定子元素在交叉軸(豎軸)如何顯示。子容器只要指定width和·height即可。<divclass="full">

<divclass="login">

登陸

</div>

</div>*{

margin:0;

padding:0;

}

.full{

width:100%;

height:100vh;

background:rgb(0,110,255);

display:flex;

justify-content:center;

align-items:center;

}

.login{

width:500px;

height:400px;

line-height:400px;

text-align:center;

border-radius:15px;

background:rgb(70,25,129);

color:white;

font-size:33px;

font-weight:900;

}瀑布流布局瀑布流布局在我們現(xiàn)在的前端頁面中經(jīng)常會用的到，它可以有效的降低頁面的復(fù)雜度，節(jié)省很多的空間，對于整個頁面不需要太多的操作，只需要下拉就可以瀏覽用戶需要看到的數(shù)據(jù)；并且，在當(dāng)前這個APP至上的時代，瀑布流可以提供很好的用戶體驗(yàn)，通過結(jié)合下拉刷新，上拉加載進(jìn)行數(shù)據(jù)的懶加載等操作，對于用戶的體驗(yàn)感來說是接近于滿分的！瀑布流的特點(diǎn)：等寬不等高，高度是動態(tài)識別圖像的高度來顯示的。它會當(dāng)計算當(dāng)前屏幕的寬度，來顯示對應(yīng)的個數(shù)，一行排滿的話，它會找到第一行高度最低的繼續(xù)排列第二行，依次類推排列。實(shí)現(xiàn)方法CSS實(shí)現(xiàn)方法：column-count+column-gap來達(dá)到分欄排放和每項(xiàng)之間的間距，但使用它有缺點(diǎn)，固定死了列，不能動態(tài)隨著瀏覽器的寬度動態(tài)變化而變化分欄。JS實(shí)現(xiàn)方法：固定死圖片的寬度，圖片放置到一個數(shù)組中，瀏覽器根據(jù)動態(tài)識別寬度來判斷當(dāng)前顯示多少項(xiàng)，然后遍歷數(shù)組，將url放置src中，下拉刷新數(shù)據(jù)，重新調(diào)取請求數(shù)據(jù)接口，push到數(shù)組中，實(shí)現(xiàn)下拉請求數(shù)據(jù)。本文采用CSS實(shí)現(xiàn)，開發(fā)中為了節(jié)省時間，可以使用庫來實(shí)現(xiàn)。<divclass="container">

<divclass="waterFall">

<divclass="item">

<imgsrc="/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1737312773,3182446833&fm=26&gp=0.jpg"

alt="">

<p>First</p>

</div>

<divclass="item">

<imgsrc="/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1875486819,805819368&fm=26&gp=0.jpg"alt="">

<p>First</p>

</div>

<divclass="item">

<imgsrc="/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=35353288,1650949252&fm=26&gp=0.jpg"alt="">

<p>First</p>

</div>

<divclass="item">

<imgsrc="/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1474216128,3433531408&fm=26&gp=0.jpg"

alt="">

<