彈性佈局（Flex佈局）的詳細介紹

　　flex-start：当容器方向子元素刚好填满时，与垂直方向的起点对齐。

　　flex-end：当容器方向子元素刚好填满时，与垂直方向的终点对齐。

　　center：当容器方向子元素刚好填满时，与垂直方向的中点对齐。

　　space-between：当容器方向子元素刚好填满时，垂直方向两端对齐，子元素之间的等距离间隔。

　　space-around：两个方向两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。

　　stretch（默认值）：占满整个垂直方向。

　　下面就是具有弹性布局容器中子元素的属性

　　1.order属性

　　order属性定义了子元素的排列顺序，数值小的在前。

.son {
  order: <integer>;
}

　　2.flex-grow属性

　　flex-grow属性定义了子元素的放大比例，默认值为0。

.son {
  flex-grow: <number>; /* default 0 */}

　　当给所有子元素设置该属性为1，那么将等分所有空间，如果单独给某一个子元素设置n倍，那么该子元素将占据的空间比其他子元素多n倍。

　　3.flex-shrink属性

　　flex-shrink属性定义了子元素的缩小比例，默认值为1。

.son {
  flex-shrink: <number>; /* default 1 */}

　　给所有子元素设置该属性为1，当空间不足时那么所有子元素将等比例缩小平分所有空间，如果单独给某一个子元素设置0，那么该子元素将在空间不足时不缩小。

　　4.flex-basis属性

　　该属性定义了给子元素分配空间时其占据的空间为多少，可以设置为与其width和height属性一样的值，那么它将被分配固定的空间大小。

　　5.flex属性

　　该属性为flex-grow, flex-shrink 和 flex-basis的简写。

　　6.align-self属性

　　该属性允许设置过的子元素有与其他子元素不一样的对齐方式，可以覆盖align-items属性。

.son {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

　　auto：預設值，表示預設繼承父級的align-items屬性。

　　flex-start：垂直方向的起點對齊。

　　flex-end：垂直方向的終點對齊。

　　center：垂直方向的中點對準。

　　baseline: 與第一個子元素中文字的基線對齊。

　　stretch(預設值)：如果子元素沒有設定高度或高度設為auto，那麼它將佔滿整個容器的高度。

        flex佈局（彈性佈局） 

      1.容器具備的屬性有：flex-dirction:(決定主軸的方向)（即項目排列方向） 取值:row/row-reverse/column/column-reverse/ flex-wrap:（如果一條軸線排不了，如何換行） 取值：nowrap（預設）：不換行。 wrap：換行，第一行在上方。 wrap-reverse：換行，第一行在下方。 flex-flow :（flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，預設值為row nowrap） justify-content:(justify-content屬性定義了項目在主軸上的對齊方式。) 取值：flex-start（預設值）：左對齊flex-end：右對齊center： 居中space-between：兩端對齊，項目之間的間隔都相等。 space-around：每個項目兩側的間隔相等。所以，專案之間的間隔比專案與邊框的間隔大一倍。 align-items (交叉軸上如何對齊) 取值:flex-start/flex-end/center/baseline/stretch align-content(定義了多根軸線的對齊方式。如果專案只有一條軸線，該屬性不起作用) 取值： flex-start：與交叉軸的起點對齊。 flex-end：與交叉軸的終點對齊。 center：與交叉軸的中點對齊。 space-between：與交叉軸兩端對齊，軸線之間的間隔平均分佈。 space-around：每根軸線兩側的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。 stretch（預設值）：軸線佔滿整個交叉軸。                                                                                                       2.項目的屬性： order屬性定義項目的排列順序。數值越小，排列越前，預設為0 flex-grow屬性定義項目的放大比例，預設為0，即如果存在剩餘空間，也不放大flex-shrink屬性定義了項目的縮小比例，預設為1，即如果空間不足，該項目將會縮小。 flex-basis專案佔據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多餘空間。它的預設值為auto，即項目的本來大 小。 flex align-self 讓單一項目有與其他項目不一樣的對齊方式，可涵蓋align-items屬性。預設值為auto，表示繼承父元素的align-items屬 性，如果沒有父元素，則等同於stretch。