HTML前端開發(fā)之路--彈性盒模型_html/css

彈性盒模型最大的特效在于，能夠動(dòng)態(tài)的修改子元素的寬度和高度，以滿足在不同尺寸屏幕下的恰當(dāng)布局；

下面是彈性盒模型的元素基本概念：

彈性盒模型的屬性總覽：

1. flex-direction屬性簡介

   例如：

2. flex-wrap屬性簡介

3. flex-flow屬性簡介

   flex-flow屬性是flex-direction和flex-wrap兩個(gè)屬性的復(fù)合屬性；

   flex-flow：[flex-direction] || [flex-wrap];

4. justify-content屬性簡介

   值得一提的是space-around屬性，

   space-around：每個(gè)項(xiàng)目兩側(cè)的間隔相等。所以，項(xiàng)目之間的間隔比項(xiàng)目與邊框的間隔大一倍；

   例如：

5. align-items屬性簡介

   例如：

6. align-content屬性簡介

接下來介紹彈性子元素性質(zhì)：

1. order屬性簡介

   order屬性定義項(xiàng)目的排列順序，數(shù)值越小排列越靠前，取值可以為負(fù)值，默認(rèn)值為0；

2. flex-grow屬性簡介

   flex-grow屬性用于定義項(xiàng)目的放大比例，默認(rèn)為0，不允許負(fù)值，即如果存在剩余空間也不放大；

3. flex-shrink屬性簡介

   flex-shrink屬性用于定義項(xiàng)目的縮小比例，默認(rèn)為1，不允許為負(fù)值；

4. flex-basis屬性簡介

   flex-basis屬性用于定義項(xiàng)目的伸縮基準(zhǔn)值，取值可以為自定義值或者auto

5. flex屬性簡介

   flex是flex-grow、flex-shrink和flex-basis的復(fù)合屬性值；

6. align-self屬性簡介

7. align-self屬性用于單獨(dú)設(shè)置項(xiàng)目在側(cè)軸的對齊方式，可以覆蓋align-items的屬性，默認(rèn)值為auto，即繼承父元素的align-items的值

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com