Startsida Utforska Hjälp
Registrera dig Logga in
an
/
build_html
1
0
Fork 0
Filer Ärenden 0 Pull-förfrågningar 0 Wiki
Gren: test
Grenar Taggar
build_html
/
h5
/
static
/
style
/
_flex.scss

_flex.scss 1.4 KB
Permalänk Historik Rå

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667 
  1. /* ==================
    2. 

  2. 		弹性布局
    3. 

  3.  ==================== */
    4. 

  4. .flex {
    5. 

  5. 	display: flex !important;
    6. 

  6. 	&-sub {
    7. 

  7. 		flex: 1 !important;
    8. 

  8. 	}
    9. 

  9. 	&-twice {
    10. 

  10. 		flex: 2 !important;
    11. 

  11. 	}
    12. 

  12. 	&-treble {
    13. 

  13. 		flex: 3 !important;
    14. 

  14. 	}
    15. 

  15. 	&-column {
    16. 

  16. 		flex-direction: column !important;
    17. 

  17. 	}
    18. 

  18. 	&-row {
    19. 

  19. 		flex-direction: row !important;
    20. 

  20. 	}
    21. 

  21. 	&-column-reverse {
    22. 

  22. 		flex-direction: column-reverse !important;
    23. 

  23. 	}
    24. 

  24. 	&-row-reverse {
    25. 

  25. 		flex-direction: row-reverse !important;
    26. 

  26. 	}
    27. 

  27. 	&-wrap {
    28. 

  28. 		flex-wrap: wrap !important;
    29. 

  29. 	}
    30. 

  30. 	&-center {
    31. 

  31. 		justify-content: center
    32. 

  32. 	}
    33. 

  33. 	&-bar {
    34. 

  34. 		// @include flex-bar;
    35. 

  35. 	}
    36. 

  36.   &-shrink-0 {
    37. 

  37.     flex-shrink: 0;
    38. 

  38.   }
    39. 

  39. }
    40. 

  40. // .basis {
    41. 

  41. // 	@each $class, $value in (xs: 20%, sm: 40%, df: 50%, lg: 60%, xl: 80%) {
    42. 

  42. // 		&-#{$class} {
    43. 

  43. // 			flex-basis: $value !important;
    44. 

  44. // 		}
    45. 

  45. // 	}
    46. 

  46. // }
    47. 

  47. // .align {
    48. 

  48. // 	@each $class, $value in (start: flex-start, end: flex-end, center: center, stretch: stretch, baseline: baseline) {
    49. 

  49. // 		&-#{$class} {
    50. 

  50. // 			align-items: $value !important;
    51. 

  51. // 		}
    52. 

  52. // 	}
    53. 

  53. // }
    54. 

  54. // .self {
    55. 

  55. // 	@each $class, $value in (start: flex-start, end: flex-end, center: center, stretch: stretch, baseline: baseline) {
    56. 

  56. // 		&-#{$class} {
    57. 

  57. // 			align-self: $value !important;
    58. 

  58. // 		}
    59. 

  59. // 	}
    60. 

  60. // }
    61. 

  61. // .justify {
    62. 

  62. // 	@each $class, $value in (start: flex-start, end: flex-end, center: center, between: space-between, around: space-around) {
    63. 

  63. // 		&-#{$class} {
    64. 

  64. // 			justify-content: $value !important;
    65. 

  65. // 		}
    66. 

  66. // 	}
    67. 

  67. // }
    68.