flexbox.scss 1.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182
  1. // Flex
  2. .#{$prefix}flex {
  3. /* #ifndef APP-NVUE */
  4. display: flex !important;
  5. /* #endif */
  6. }
  7. .#{$prefix}flex-center {
  8. /* #ifndef APP-NVUE */
  9. display: flex !important;
  10. /* #endif */
  11. justify-content: center !important;
  12. align-items: center !important;
  13. }
  14. // Flex Basis
  15. // 行内 Flex
  16. // Flex 方向
  17. .#{$prefix}flex-row {
  18. flex-direction: row !important;
  19. }
  20. .#{$prefix}flex-row-reverse {
  21. flex-direction: row-reverse !important;
  22. }
  23. .#{$prefix}flex-col {
  24. flex-direction: column !important;
  25. }
  26. .#{$prefix}flex-col-reverse {
  27. flex-direction: column-reverse !important;
  28. }
  29. // Flex Wrap
  30. .#{$prefix}flex-wrap {
  31. flex-wrap: wrap !important;
  32. }
  33. .#{$prefix}flex-wrap-reverse {
  34. flex-wrap: wrap-reverse !important;
  35. }
  36. .#{$prefix}flex-nowrap {
  37. flex-wrap: nowrap !important;
  38. }
  39. /* #ifndef APP-NVUE */
  40. // Flex Stretch
  41. // .#{$prefix}flex-1 {
  42. // flex: 1 1 0%;
  43. // }
  44. .#{$prefix}flex-auto {
  45. flex: 1 1 auto;
  46. }
  47. .#{$prefix}flex-initial {
  48. flex: 0 1 auto;
  49. }
  50. .#{$prefix}flex-none {
  51. flex: none;
  52. }
  53. /* #endif */
  54. // flex: {1~16} !important;
  55. @for $i from 1 through 16 {
  56. .#{$prefix}flex-#{$i} {
  57. flex: $i !important;
  58. }
  59. }
  60. /* #ifndef APP-NVUE */
  61. // Flex Grow
  62. .#{$prefix}flex-grow-0 {
  63. flex-grow: 0;
  64. }
  65. .#{$prefix}flex-grow {
  66. flex-grow: 1;
  67. }
  68. // Flex Shrink
  69. .#{$prefix}flex-shrink-0 {
  70. flex-shrink: 0;
  71. }
  72. .#{$prefix}flex-shrink {
  73. flex-shrink: 1;
  74. }
  75. /* #endif */