教育行業(yè)A股IPO第一股（股票代碼 003032）

全國咨詢/投訴熱線：400-618-4000

彈性盒布局常用屬性列舉【web前端】

更新時(shí)間:2020年12月10日16時(shí)39分 來源:傳智教育 瀏覽次數(shù):

好口碑IT培訓(xùn)

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

　　1. display屬性

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

　　下面我們通過一個(gè)案例來演示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)通過瀏覽器訪問測(cè)試，運(yùn)行結(jié)果如圖1所示。

1607588878629_21.jpg

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

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

　　2. flex-flow屬性

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

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

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

　　表1 flex-direction取值
1607588895979_2.png

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

　　表2 flex-wrap取值

1607588911292_23.png

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

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

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

/* height: 60px; */  /* 將高度注釋起來 */
flex-flow: column-reverse;

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

1607588927205_24.png

　　接下來打開demo02.html文件，修改.box元素的樣式，具體修改如下。

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

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

1607588936728_25.jpg

　　圖3 justify-content取值space-between

　　4. align-items屬性

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

　　表4 align-items取值

1607588950313_26.png

　　接下來打開demo02.html文件，修改.box元素的樣式，具體修改如下。

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

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

1607588972702_27.jpg

　　圖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; }

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

1607588983155_28.jpg

　　圖5 元素排列效果

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

　　6. flex屬性

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

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

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

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

1607588993402_29.jpg

　　圖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屬性的取值類似。

　　需要注意的是，在使用彈性盒布局時(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。

猜你喜歡：

什么是事件委托？JavaScript事件委托的實(shí)現(xiàn)原理

JavaScript如何引入腳本文件？

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

傳智播客web前端培訓(xùn)課程 

0 分享到：
和我們?cè)诰€交談！