HTML前端開發之路——彈性盒模型

彈性盒模型（Flexible Box）是一個CSS3新增佈局模塊，用於實現容器裏項目的對齊、方向、排序；

彈性盒模型最大的特效在於，可以動態的修改子元素的寬度和高度，以知足在不一樣尺寸屏幕下的恰當佈局；

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

彈性盒模型的屬性總覽：

1. flex-direction屬性簡介

   例如：

2. flex-wrap屬性簡介

3. flex-flow屬性簡介

   flex-flow屬性是flex-direction和flex-wrap兩個屬性的複合屬性；

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

4. justify-content屬性簡介

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

   space-around：每一個項目兩側的間隔相等。因此，項目之間的間隔比項目與邊框的間隔大一倍；

   例如：

5. align-items屬性簡介

   例如：

6. align-content屬性簡介

接下來介紹彈性子元素性質：

1. order屬性簡介

   order屬性定義項目的排列順序，數值越小排列越靠前，取值能夠爲負值，默認值爲0；

2. flex-grow屬性簡介

   flex-grow屬性用於定義項目的放大比例，默認爲0，不容許負值，即若是存在剩餘空間也不放大；

3. flex-shrink屬性簡介

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

4. flex-basis屬性簡介

   flex-basis屬性用於定義項目的伸縮基準值，取值能夠爲自定義值或者auto

5. flex屬性簡介

   flex是flex-grow、flex-shrink和flex-basis的複合屬性值；

6. align-self屬性簡介

7. align-self屬性用於單獨設置項目在側軸的對齊方式，能夠覆蓋align-items的屬性，默認值爲auto，即繼承父元素的align-items的值