彈性盒布局的4種常用屬性演示【前端技術(shù)文章】

更新時(shí)間:2020-12-10 來(lái)源:黑馬程序員瀏覽量:

1577370495235_學(xué)IT就到黑馬程序員.gif

　　彈性盒子是一種非常靈活的布局方法，就像幾個(gè)小盒子放在一個(gè)大盒子里一樣，相對(duì)獨(dú)立，容易設(shè)置，下面我么來(lái)看看彈性盒子的幾種屬性。

　　1. display屬性

　　display屬性用于指定元素容器的類(lèi)型，其默認(rèn)值為inline，這意味著此元素會(huì)被顯示為一個(gè)內(nèi)聯(lián)元素，在元素前后沒(méi)有換行符;如果設(shè)置display的值為flex，則表示用于指定彈性盒的容器;如果設(shè)置display的值為none，則表示此元素不會(huì)被顯示。

　　下面我們通過(guò)一個(gè)案例來(lái)演示display屬性的使用，如例4-1所示。

　　【例4-1】

　　(1)創(chuàng)建C:\web\chapter04\demo02.html文件，具體代碼如下。

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4  <meta charset="UTF-8">
 5  <title>彈性盒屬性</title>
 6  <style>
 7   .box {
 8     display: flex;
 9     border: 1px solid #999;
 10     height: 60px;
 11     padding: 4px;
 12     background: #ddd;
 13   }
 14   .box > div {
 15     margin: 2px;
 16     padding: 2px;
 17     border: 1px solid #999;
 18     background: #fff;
 19   }
 20  </style>
 21 </head>
 22 <body>
 23  <div class="box">
 24   <div class="a">A</div>
 25   <div class="b">B</div>
 26   <div class="c">C</div>
 27  </div>
 28 </body>
 29 </html>

　　(2)通過(guò)瀏覽器訪問(wèn)測(cè)試，運(yùn)行結(jié)果如圖1所示。

　　圖1 彈性盒結(jié)構(gòu)

　　從圖1可以看出，當(dāng)父元素.box的display設(shè)為flex后，子元素就會(huì)按照內(nèi)容的實(shí)際寬度來(lái)顯示，且子元素的高度會(huì)占滿(mǎn)父元素的可用高度。

　　2. flex-flow屬性

　　flex-flow是屬性flex-direction和flex-wrap的簡(jiǎn)寫(xiě)，用于排列彈性子元素。

　　flex-direction用于調(diào)整主軸的方向，可以調(diào)整為橫向或者縱向。默認(rèn)情況下是橫向，此時(shí)橫軸為主軸，縱軸為側(cè)軸;如果改為縱向，則縱軸為主軸，橫軸為側(cè)軸。

　　flex-direction的其取值如表1所示。

　　表1 flex-direction取值

　　flex-wrap用于讓彈性盒元素在必要的時(shí)候拆行，取值如表2所示。

　　表2 flex-wrap取值

　　當(dāng)使用flex-flow時(shí)，其值是flex-direction的值和flex-wrap的值的組合。例如，將flex-direction設(shè)為row，將flex-wrap設(shè)為nowrap，示例代碼如下。

/* 簡(jiǎn)寫(xiě)形式 */
flex-flow: row nowrap;
/* 分開(kāi)寫(xiě) */
flex-direction: row;
flex-wrap: nowrap;

　　下面通過(guò)案例演示flex-flow的使用。打開(kāi)demo02.html文件，修改.box元素的樣式，具體修改如下。

/* height: 60px; */  /* 將高度注釋起來(lái) */
flex-flow: column-reverse;

　　修改完成后，頁(yè)面效果如圖2所示。

　　接下來(lái)打開(kāi)demo02.html文件，修改.box元素的樣式，具體修改如下。

height: 60px;
/* flex-flow: column-reverse; */ /* 將上一步的代碼注釋或刪除 */
justify-content: space-between;

　　修改完成后，頁(yè)面效果如圖3所示。

　　圖3 justify-content取值space-between

　　4. align-items屬性

　　align-items屬性用于定義子元素在側(cè)軸上的對(duì)齊方式，其取值如表4所示。

　　表4 align-items取值

　　接下來(lái)打開(kāi)demo02.html文件，修改.box元素的樣式，具體修改如下。

/* justify-content: space-between;*/ /* 將上一步的代碼注釋或刪除 */
align-items: center;

　　修改完成后，頁(yè)面效果如圖4所示。

　　圖4 align-items取值center

　　從圖4可以看出，子元素在父元素內(nèi)垂直居中了。

　　5. order屬性

　　order屬性用于設(shè)置子元素出現(xiàn)的排列順序，數(shù)值越小，排列將會(huì)越靠前，默認(rèn)為0。

　　例如，修改demo02.html的代碼，將子元素A、B、C的order值分別修改為2、3、1，具體代碼如下。

.a { order: 2; }
.b { order: 3; }
.c { order: 1; }

　　修改完成后，頁(yè)面效果如圖5所示。

　　圖5 元素排列效果

　　在測(cè)試完成后，刪除order的樣式代碼，以免影響后面的代碼演示。

　　6. flex屬性

　　flex屬性是flex-grow(擴(kuò)展比率)、flex-shrink(收縮比率)和flex-basis(寬度，像素值)的簡(jiǎn)寫(xiě)形式，能夠設(shè)置子元素的伸縮性。

　　例如，修改demo02.html的代碼，將子元素A的flex-grow改為1，具體代碼如下。

.a { 
 flex-grow: 1; /* 也可以寫(xiě)成 flex: 1; */
}

　　修改完成后，頁(yè)面效果如圖6所示。

　　圖6 將A的flex-grow改為1

　　在測(cè)試完成后，刪除flex-grow的樣式代碼，以免影響后面的代碼演示。

　　7. align-self屬性

　　align-self屬性能夠覆蓋容器中的align-items屬性，用于設(shè)置單獨(dú)的子元素如何沿著縱軸排列。其取值有auto、flex-start、flex-end、center、baseline、stretch，每個(gè)值的意義與align-items屬性的取值類(lèi)似。

　　需要注意的是，在使用彈性盒布局時(shí)，以下屬性不起作用。

　　(1) 彈性容器的每一個(gè)子元素變?yōu)橐粋€(gè)彈性子元素，彈性容器直接包含的文本變?yōu)槟涿膹椥宰釉亍?/p>

　　(2) 多列布局中的column-*屬性對(duì)彈性子元素?zé)o效。

　　(3) float和clear對(duì)彈性子元素?zé)o效。使用float會(huì)導(dǎo)致display屬性計(jì)算為block。

　　(4) vertical-align屬性對(duì)彈性子元素的對(duì)齊無(wú)效。

猜你喜歡：

什么是Sass？Sass的優(yōu)勢(shì)有哪些？

變量是什么？JavaScript變量的命名聲明與賦值講解式

黑馬程序員web前端培訓(xùn)課程

上一篇：什么是Sass？Sass的優(yōu)勢(shì)有哪些？ 下一篇：什么是Bootstrap？如何下載和使用Bootstrap？