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

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

彈性盒模型的屬性總覽：

1. flex-direction屬性簡介

   例如：

2. flex-wrap屬性簡介

3. flex-flow屬性簡介

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

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

4. justify-content屬性簡介

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

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

   例如：

5. align-items屬性簡介

   例如：

6. align-content屬性簡介

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

1. order屬性簡介

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

2. flex-grow屬性簡介

   flex-grow屬性用于定義項目的放大比例，默認為0，不允許負值，即如果存在剩余空間也不放大；

3. flex-shrink屬性簡介

   flex-shrink屬性用于定義項目的縮小比例，默認為1，不允許為負值；

4. flex-basis屬性簡介

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

5. flex屬性簡介

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

6. align-self屬性簡介

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

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