base.scss 1.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
  1. /*每个页面公共css */
  2. page {
  3. min-height: 100%;
  4. background-color: #f7f7f7;
  5. }
  6. /* ==================
  7. flex布局(colorui里面也有相关基础样式)
  8. ==================== */
  9. /* x水平排列*/
  10. .x-f {
  11. display: flex;
  12. align-items: center;
  13. }
  14. /*x两端且水平居中*/
  15. .x-bc {
  16. display: flex;
  17. justify-content: space-between;
  18. align-items: center;
  19. }
  20. /*x平分且水平居中*/
  21. .x-ac {
  22. display: flex;
  23. justify-content: space-around;
  24. align-items: center;
  25. }
  26. /*x水平靠上对齐*/
  27. .x-start {
  28. display: flex;
  29. align-items: flex-start;
  30. }
  31. /*x水平靠下对齐*/
  32. .x-end {
  33. display: flex;
  34. align-items: flex-end;
  35. }
  36. /*上下左右居中*/
  37. .x-c {
  38. display: flex;
  39. justify-content: center;
  40. align-items: center;
  41. }
  42. /*y竖直靠左*/
  43. .y-start {
  44. display: flex;
  45. flex-direction: column;
  46. align-items: flex-start;
  47. }
  48. /*y竖直靠右*/
  49. .y-end {
  50. display: flex;
  51. flex-direction: column;
  52. align-items: flex-end;
  53. }
  54. /*y竖直居中*/
  55. .y-f {
  56. display: flex;
  57. flex-direction: column;
  58. align-items: center;
  59. }
  60. /* y竖直两端*/
  61. .y-b {
  62. display: flex;
  63. flex-direction: column;
  64. justify-content: space-between;
  65. }
  66. /*y竖直两端居中*/
  67. .y-bc {
  68. display: flex;
  69. flex-direction: column;
  70. align-items: center;
  71. justify-content: space-between;
  72. }