flex屬性總結(全)


一.父元素屬性
1.display:flex;(定義了一個flex容器)
2. flex-direction(決定主軸的方向)
      row默認值,水平從左到右)colunm(垂直從上到下)row-reverse(水平從右到左)column-reverse垂直從下到上)
3. flex-wrap(定義如何換行)
      nowrap(默認值,不換行)wrap(換行)wrap-reverse(換行,且顛倒行順序,第一行在下方)
4.flex-flow(屬性是 flex-direction 屬性和 flex-wrap 屬性的簡寫形式,默認值為row nowrap)
5. justify-content(設置或檢索彈性盒子元素在主軸(橫軸)方向上的對齊方式)
      flex-start( 默認值、彈性盒子元素將向行起始位置對齊)
      flex-end(彈性盒子元素將向行結束位置對齊)
      center(彈性盒子元素將向行中間位置對齊。該行的子元素將相互對齊並在行中居中對齊)
      space-between(彈性盒子元素會平均地分布在行里)
      space-around(彈性盒子元素會平均地分布在行里,兩端保留子元素與子元素之間間距大小的一半)
6.align-items(設置或檢索彈性盒子元素在側軸(縱軸)方向上的對齊方式)
      flex-start(彈性盒子元素的側軸(縱軸)起始位置的邊界緊靠住該行的側軸起始邊界)
      flex-end(彈性盒子元素的側軸(縱軸)起始位置的邊界緊靠住該行的側軸結束邊界)
      center( 彈性盒子元素在該行的側軸(縱軸)上居中放置。(如果該行的尺寸小於彈性盒子元素的尺寸,則會向兩個方向溢出相同的長度))
      baseline(如彈性盒子元素的行內軸與側軸為同一條,則該值與flex-start等效。其它情況下,該值將參與基線對齊。)
      stretch(如果指定側軸大小的屬性值為'auto',則其值會使項目的邊距盒的尺寸盡可能接近所在行的尺寸,但同時會遵照'min/max-width/height'屬性的限制)
7.align-content(設置或檢索彈性盒堆疊伸縮行的對齊方式)
      flex-start(各行向彈性盒容器的起始位置堆疊。彈性盒容器中第一行的側軸起始邊界緊靠住該彈性盒容器的側軸起始邊界,之后的每一行都緊靠住前面一行)
      flex-end(各行向彈性盒容器的結束位置堆疊。彈性盒容器中最后一行的側軸起結束界緊靠住該彈性盒容器的側軸結束邊界,之后的每一行都緊靠住前面一行)
      center各行向彈性盒容器的中間位置堆疊。各行兩兩緊靠住同時在彈性盒容器中居中對齊,保持彈性盒容器的側軸起始內容邊界和第一行之間的距離與該容器的側軸結束內容邊界與第最后一      行之間的距離相等)
      space-between(各行在彈性盒容器中平均分布。第一行的側軸起始邊界緊靠住彈性盒容器的側軸起始內容邊界,最后一行的側軸結束邊界緊靠住彈性盒容器的側軸結束內容邊界,剩余的行則      按一定方式在彈性盒窗口中排列,以保持兩兩之間的空間相等)
      space-around 各行在彈性盒容器中平均分布,兩端保留子元素與子元素之間間距大小的一半。各行會按一定方式在彈性盒容器中排列,以保持兩兩之間的空間相等,同時第一行前面及最后      一行后面的空間是其他空間的一半)
      stretch(各行將會伸展以占用剩余的空間。剩余空間被所有行平分,以擴大它們的側軸尺寸)
二.子元素上屬性
1.order(默認情況下flex order會按照書寫順訓呈現,可以通過order屬性改變,數值小的在前面,還可以是負數)
2.flex-grow(設置或檢索彈性盒的擴展比率,根據彈性盒子元素所設置的擴展因子作為比率來分配剩余空間)
3.flex-shrink(設置或檢索彈性盒的收縮比率,根據彈性盒子元素所設置的收縮因子作為比率來收縮空間)
4.flex-basis (設置或檢索彈性盒伸縮基准值,如果所有子元素的基准值之和大於剩余空間,則會根據每項設置的基准值,按比率伸縮剩余空間)
5.flex   (flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫,默認值為0 1 auto。后兩個屬性可選)
6.align-self  (設置或檢索彈性盒子元素在側軸(縱軸)方向上的對齊方式,可以覆蓋父容器align-items的設置)

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM