首頁技術(shù)文章正文

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

更新時間:2020-12-10 來源:黑馬程序員 瀏覽量:

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

　　

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

　　1. display屬性

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

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

1607588878629_21.jpg

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

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

　　2. flex-flow屬性

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

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

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

　　表1 flex-direction取值
1607588895979_2.png

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

　　表2 flex-wrap取值

1607588911292_23.png

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

/* 簡寫形式 */
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è)軸上的對齊方式，其取值如表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ù)值越小，排列將會越靠前，默認(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 元素排列效果

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

　　6. flex屬性

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

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

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

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

1607588993402_29.jpg

　　圖6 將A的flex-grow改為1

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

　　7. align-self屬性

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

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

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

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

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

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


猜你喜歡：

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

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

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

分享到：
在線咨詢 我要報名
和我們在線交談！