flex佈局簡析

最近開始對flex佈局進行一個從新的認識。

首先。

flex佈局適用於全部元素

可是注意一點的就是，一旦父級元素設定flex佈局的時候，子元素的傳統佈局屬性, float,clear,vertical-align屬性都會失效的。

一.父容器的屬性

1.flex-direction

   是決定元素主軸的方向

   row:默認值，由左到右正序。

   row-reverse:有右到左的逆序

   column:有上倒下的正序

   column-reserve:由下到上的逆序

2.flex-wrap

   是否換行

   nowrap:默認值，不換行(當元素數量和寬度超出父級，就會縮短自身寬度)

   wrap:換行(保留當前寬度，換行。且行高等於父級元素的一半)

   wrap-reverse:由下向上換行，同wrap同樣，但若是父級寬度太低，那行高就爲1

3.justify-content

   定義元素在父級X軸對齊方式

   flex-start:默認值，元素左對齊。

   flex-end:元素右對齊

   center:元素中間對齊

   space-between:元素等分兩邊對齊

   space-around:元素等分，兩邊有間隔。且間隔是元素之間間隔的一半

4.align-items

    定義元素在父級y軸對齊的方式

    flex-start:元素上對齊

    flex-end:元素下對其

    center:元素居中顯示

    stretch:默認值，若是沒設置高度，那麼高度就爲100%；

5.align-centent

    當超過兩行的時候，上下對齊方式

    flex-start:元素上對其

    fled-end:元素下對其

    center:元素劇中對齊

    stretch:默認值，佔滿整個交叉軸

    space-between:元素等分上下對齊

    space-around:元素等分，上下又間隔，且間隔是元素之間間隔的一半

2、子元素的屬性

      1.order

    order默認值爲0，屬性定義元素的排列順序，最小越前

2.flex-grow

    flex-grow默認值爲0，屬性定義元素寬高增大佔比，值越大佔比越大

3.flex-shrink

    flex-shrink默認值爲1，屬性定義元素寬高縮小佔比，值越大縮小越大，負值無效

4.flex-basis

    flex-basis默認值爲auto，屬性意義和width相同，可是優先級高於width

5.align-self

    align-self默認值是flex-start,屬性的定義和align-items相同，可是會覆蓋其樣式單獨定義

 

3、疑難點

1.align-items和align-content之間文字的區別？

    不少人對這兩個屬性又一些不解，一樣都是操縱子元素Y軸可是，align-content只能操做多

    行，單行是無效的。並且align-content會重置flex項目元素對自身等分的行高問題。

    話很少說一個圖能表明一切：   

                

 

 

    

           這樣是否是就瞭解了

    2.align-self和align-items之間的區別

    相對於第一個問題，這個就更簡單了，align-items是給子元素規定一個統同樣式，而align-self

    是單獨的本身給本身樣式。

   暫且有這麼多。之後在有問題在補充