Practical Training Demo1-felx布局

個人了解：

/* felx布局

       -三步驟

       -1.display: flex;--先寫出flex

       2.justify-content: space-around; ---相當于整體分布

       3.align-items: center;  内容的水準居中

       */

檢視官方得知的資訊：

1、flex-direction---屬性決定主軸的方向（即項目的排列方向）、

flex-direction：可能有四個值：1、row(預設值)：主軸為水準方向，起點在左端。

2、row-reverse:主軸為水準方向，起點在右端。

3、column:主軸為垂直方向，起點在上沿。

4、column-reverse:主軸為垂直方向，起點在下沿。

2、flex-wrap---預設情況下，項目都排在一條線（又稱”軸線”）上。flex-wrap屬性定義，如果一條軸線排不下，如何換行。

（1）nowrap（預設）：不換行。（2）wrap：換行，第一行在上方。（3）wrap-reverse：換行，第一行在下方。

3、flex-flow：flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，預設值為row nowrap。

4、justify-content屬性定義了項目在主軸上的對齊方式。

他可能取5個值，具體對齊方式與軸的方向有關。下面假設主軸為從左到右。

（1）flex-start(預設值)：左對齊、（2）flex-end:右對齊、（3）center:居中、（4）space-between:兩端對齊，項目之間的間隔都相等。（5）space-around:每個項目兩側的間隔相等。是以，項目之間的間隔比項目與邊框的間隔大一倍。

5、align-items：屬性定義項目在交叉軸上如何對齊。

他可能取5個值。具體的對齊方式與交叉軸的方向有關，下面假設交叉軸從上到下。

（1）flex-start：交叉軸的起點對齊。（2）flex-end：交叉軸的終點對齊。（3）center：交叉軸的中點對齊。（4）Baseline：項目的第一行文字的基線對齊。（5）stretch(預設值)：如果項目未設定高度或設為auto，将占滿整個容器的高度。

6、align-content屬性定義了多根軸線的對齊方式。如果項目隻有一根軸線，該屬性不起作用。

該屬性可能有6個值。

（1）     flex-start:與交叉軸的起點對齊。

（2）     flex-end：與i交叉軸的終點對齊。

（3）     center：與交叉軸的中點對齊。

（4）     space-between：與交叉軸的兩端對齊，軸線之間的間隔平均分布。

（5）     space-around：每根軸線兩側的間隔都相等。是以，軸線之間的間隔比軸線與邊框的間隔大一倍。

（6）     stretch:（預設值）軸線沾滿整個交叉軸。