Newer
Older
KaiFengPC / src / assets / styles / flex.scss
@zhangdeliang zhangdeliang on 23 May 903 bytes 初始化项目
  1. /*flex布局基本样式*/
  2. .flex {
  3. display: flex;
  4. }
  5.  
  6. .inline-flex {
  7. display: inline-flex;
  8. }
  9.  
  10. .flex-r {
  11. flex-direction: row;
  12. }
  13.  
  14. .flex-v {
  15. flex-direction: column;
  16. }
  17.  
  18. /*垂直方向*/
  19. .flex-align-start {
  20. align-items: flex-start;
  21. }
  22.  
  23. .flex-align-center {
  24. align-items: center;
  25. }
  26.  
  27. .flex-align-end {
  28. align-items: flex-end;
  29. }
  30.  
  31. .flex-align-baseline {
  32. align-items: baseline;
  33. }
  34.  
  35. /*水平方向*/
  36. .flex-justcontent-center {
  37. justify-content: center;
  38. }
  39.  
  40. .flex-justcontent-spacebetween {
  41. justify-content: space-between;
  42. }
  43.  
  44. .flex-justcontent-start {
  45. justify-content: flex-start;
  46. }
  47.  
  48. .flex-justcontent-end {
  49. justify-content: flex-end;
  50. }
  51.  
  52. .flex-justcontent-spacearound {
  53. justify-content: space-around;
  54. }
  55. .flex-justcontent-spaceevenly {
  56. justify-content: space-evenly;
  57. }
  58.  
  59. /*平均分布*/
  60. .flex-1 {
  61. flex: 1;
  62. }
  63.  
  64. /*换行*/
  65. .flex-wrap {
  66. flex-wrap: wrap;
  67. }
  68.  
  69. .flex-nowrap {
  70. flex-wrap: nowrap;
  71. }