css彈性佈局

根據語法添加的位置不一樣分爲兩部分：一爲語法在父容器上的，二爲語法在子容器上的。

如下是我在逆戰班學習以後本身的理解

1. 語法是添加到父容器上的？

    1).display : flex;     設置盒子

    2).flex-direction:    佈局的排列方向 （主軸排列方向）

        row; 默認值，顯示爲行。方向爲當前文檔水平流方向，默認狀況下是從左往右。

 

        row-reverse; 顯示爲行。但方向和row屬性值是反的

 

        column; 顯示爲列

 

        column-reverse; 顯示爲列。但方向和column屬性值是反的

 

    3).flex-wrap:是否進行換行處理。

        nowrap; 默認值，不換行處理

 

        wrap; 換行處理

 

        wrap-reverse; 反向換行

 

    4).flex-flow :複合寫法 (是有順序的，先寫顯示的方向，再寫是否換行,中間空格隔開)。

例：flex-flow : row nowrap;

    5).justify-content : 屬性決定了主軸方向上子項的對齊和分佈方式。 

        flex-start : 子項都去起始位置對齊。

 

        flex-end : 子項都去結束位置對齊。

 

        center : 子項都去中心位置對齊。

 

        space-between : 表現爲兩端對齊。between是中間的意思，意思是多餘的空白間距只在元素中間區域分配。

 

        space-around : around是環繞的意思，意思是每一個flex子項兩側都環繞互不干擾的等寬的空白間距，最終視覺上邊緣兩側的空白只有中間空白寬度一半。

 

        space-evenly : evenly是勻稱、平等的意思。也就是視覺上，每一個flex子項兩側空白間距徹底相等。

 

    6).align-items : 每一行中的子元素上下對齊方式。

        flex-start; 每行的頂端對齊

 

        center;居中

 

        flex-end;每行的底端對齊

 

    7).align-content : 跟justify-content相反的操做。側軸的對齊方式。(最少須要兩行才能看出效果，由於他是多行的一個上下對齊方式)

        默認：多行下，有幾行就會把容器劃分爲幾部分，默認就是stretch拉伸的。

        注：值跟justify-content取值是相同的。

2. 語法是添加到子容器上的？

    1).order : 排序

 

    2).flex-grow : 擴展 ( 想看到擴展的效果，必須有空隙 )

        0 : 默認值 , 不去擴展

        1 : 去擴展 , 會把空白區域所有沾滿

            注:子元素會按照設置的比例值來分配空隙，若是比例值總和小於1，那麼會有空隙，若是比例值總和大於等於1，那麼就沒有空隙。

 

    3).flex-shrink : 收縮

        正常默認值是1

        0表示不收縮，.5收縮小一些，2收縮大一些。（大小是跟正常縮放1進行比較的）

 

    4).flex-basis : 跟flex-shrink/flex-grow很像。

        flex-shrink/flex-grow是設置一個比例值，flex-basis是設置一個具體值。

 

    5).algin-self: 跟align-items操做很像，區別就是隻是針對某一個子項。

        注：默認狀況下，在彈性盒子中的子元素的左右排列的。

 

3.注：

    水平是主軸的時候：默認狀況下，當寬高不寫的時候，寬度由內容決定，高度由父容器決定。

    垂直是主軸的時候：默認狀況下，當寬高不寫的時候，寬度由父容器決定，高度由內容決定。

4.注：當子項的總寬度大於父容器的時候，會自動收縮的（彈性的優先級是大於自身固定大小的）

5.注：當子項的內容已經達到了父容器最小寬高的時候，就會出現溢出的現象。

6.注：彈性佈局中用的頻率比較多的語法：

    display : flex;

    flex-direction;

    justify-content;

    align-items;

    flex;