*學習筆記

flex 屬性

作用在flex容器上 ? ? ? ? ? ? ? ?作用在flex子項上

flex-direction ? ? ? ? ? ? ? ? ? ? ? ?order

flex-wrap ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?flex-grow

flex-flow ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? flex-shrink

justify-content ? ? ? ? ? ? ? ? ? ? ?flex-basis

align-items ? ? ? ? ? ? ? ? ? ? ? ? ? flex

align-content ? ? ? ? ? ? ? ? ? ? ? ?align-self

flex容器上的屬性

flex-direction：控制子項整體布局方向，是從左往右還是右往左，是從上往下還是下往上。

? ? 取值：row 默認值，顯示為行，默認從左往右

? ? ? ? ? ? ? ?row-reverse 顯示為行，但方向和row屬性值相反

? ? ? ? ? ? ? ?column 顯示為列

? ? ? ? ? ? ? ?column-reverse 顯示為列，與column方向相反

flex-warp：控制子項整體單行顯示還是換行顯示

? ? 取值： nowrap： 默認值，表示單行顯示，不換行

? ? ? ? ? ? ? ? warp：寬度不足換行顯示

? ? ? ? ? ? ? ? wrap-reverse：寬度不足換行顯示,但是從下往上開始

flex-flow ：是flex-direction和flex-warp的縮寫，表示flex布局的flow流動特性。第一個值代表方向，第二個值表示換行，中間用空格隔開。

justify-content ?：決定了主軸方向上子項的對齊和分布方式。

? ? 取值： flex-start：默認值，起始位置對齊

????????????????flex-end：結(jié)束位置對齊

????????????????center：居中對齊

????????????????space-between：兩端對齊

????????????????space-around：環(huán)繞，每個flex子項兩側(cè)都環(huán)繞互不干擾的等寬空白間距，中間間距不會疊加。

????????????????space-evenly：每個flex子項兩側(cè)空白間距完全相等。

align-items：flex子項們相對于flex容器在側(cè)軸方向上的對齊方式

? ? 取值：stretch：默認值，flex子項拉伸

? ? ? ? ? ? ? ?flex-satrt：表現(xiàn)為容器頂部對齊

? ? ? ? ? ? ? ?flex-end：表現(xiàn)為容器底部對齊

? ? ? ? ? ? ? ?center：表現(xiàn)為垂直居中對齊

align-content ：側(cè)軸方向上子項的對齊的方式

? ? ? ? ? ? ? ?flex-satrt：表現(xiàn)為容器頂部對齊

? ? ? ? ? ? ? ?flex-end：表現(xiàn)為容器底部對齊

? ? ? ? ? ? ? ?center：表現(xiàn)為垂直居中對齊

???????????????space-between：兩端對齊

? ? ? ? ? ? ? ?space-around：每一行元素都享有獨立不重疊的空白空間

? ? ? ? ? ? ? ?space-evenly：每一行元素上下等分

flex子項上的屬性

????order：可通過設(shè)置order改變某一個flex子項的排序位置，所有flex子項的默認order屬性值為0。

????flex-grow：擴展flex子項所占據(jù)的寬度。擴展所侵占的空間就是除去元素外的剩余的空白間隙，默認值為0。

????flex-shrink：處理當flex容器空間不足時，單個元素的收縮比例，默認值為1。

????flex-basis：定義了在分配剩余空間之前元素的默認大小。

????flex：是flex-grow、flex-shrink、flex-basis的縮寫。

????align-self：指控制單獨某一個flex子項的垂直對齊方式