内外边距 

  1. /*  -- 内外边距 -- */
  3. .margin-0 {
  4.     margin: 0;
  5. }
  7. .margin-xs {
  8.     margin: 5px;
  9. }
  11. .margin-sm {
  12.     margin: 10px;
  13. }
  15. .margin {
  16.     margin: 15px;
  17. }
  19. .margin-lg {
  20.     margin: 20px;
  21. }
  23. .margin-xl {
  24.     margin: 25px;
  25. }
  27. .margin-top-xs {
  28.     margin-top: 5px;
  29. }
  31. .margin-top-sm {
  32.     margin-top: 10px;
  33. }
  35. .margin-top {
  36.     margin-top: 15px;
  37. }
  39. .margin-top-lg {
  40.     margin-top: 20px;
  41. }
  43. .margin-top-xl {
  44.     margin-top: 25px;
  45. }
  47. .margin-right-xs {
  48.     margin-right: 5px;
  49. }
  51. .margin-right-sm {
  52.     margin-right: 10px;
  53. }
  55. .margin-right {
  56.     margin-right: 15px;
  57. }
  59. .margin-right-lg {
  60.     margin-right: 20px;
  61. }
  63. .margin-right-xl {
  64.     margin-right: 25px;
  65. }
  67. .margin-bottom-xs {
  68.     margin-bottom: 5px;
  69. }
  71. .margin-bottom-sm {
  72.     margin-bottom: 10px;
  73. }
  75. .margin-bottom {
  76.     margin-bottom: 15px;
  77. }
  79. .margin-bottom-lg {
  80.     margin-bottom: 20px;
  81. }
  83. .margin-bottom-xl {
  84.     margin-bottom: 25px;
  85. }
  87. .margin-left-xs {
  88.     margin-left: 5px;
  89. }
  91. .margin-left-sm {
  92.     margin-left: 10px;
  93. }
  95. .margin-left {
  96.     margin-left: 15px;
  97. }
  99. .margin-left-lg {
  100.     margin-left: 20px;
  101. }
  103. .margin-left-xl {
  104.     margin-left: 25px;
  105. }
  107. .margin-lr-xs {
  108.     margin-left: 5px;
  109.     margin-right: 5px;
  110. }
  112. .margin-lr-sm {
  113.     margin-left: 10px;
  114.     margin-right: 10px;
  115. }
  117. .margin-lr {
  118.     margin-left: 15px;
  119.     margin-right: 15px;
  120. }
  122. .margin-lr-lg {
  123.     margin-left: 20px;
  124.     margin-right: 20px;
  125. }
  127. .margin-lr-xl {
  128.     margin-left: 25px;
  129.     margin-right: 25px;
  130. }
  132. .margin-tb-xs {
  133.     margin-top: 5px;
  134.     margin-bottom: 5px;
  135. }
  137. .margin-tb-sm {
  138.     margin-top: 10px;
  139.     margin-bottom: 10px;
  140. }
  142. .margin-tb {
  143.     margin-top: 15px;
  144.     margin-bottom: 15px;
  145. }
  147. .margin-tb-lg {
  148.     margin-top: 20px;
  149.     margin-bottom: 20px;
  150. }
  152. .margin-tb-xl {
  153.     margin-top: 25px;
  154.     margin-bottom: 25px;
  155. }
  157. .padding-0 {
  158.     padding: 0;
  159. }
  161. .padding-xs {
  162.     padding: 5px;
  163. }
  165. .padding-sm {
  166.     padding: 10px;
  167. }
  169. .padding {
  170.     padding: 15px;
  171. }
  173. .padding-lg {
  174.     padding: 20px;
  175. }
  177. .padding-xl {
  178.     padding: 25px;
  179. }
  181. .padding-top-xs {
  182.     padding-top: 5px;
  183. }
  185. .padding-top-sm {
  186.     padding-top: 10px;
  187. }
  189. .padding-top {
  190.     padding-top: 15px;
  191. }
  193. .padding-top-lg {
  194.     padding-top: 20px;
  195. }
  197. .padding-top-xl {
  198.     padding-top: 25px;
  199. }
  201. .padding-right-xs {
  202.     padding-right: 5px;
  203. }
  205. .padding-right-sm {
  206.     padding-right: 10px;
  207. }
  209. .padding-right {
  210.     padding-right: 15px;
  211. }
  213. .padding-right-lg {
  214.     padding-right: 20px;
  215. }
  217. .padding-right-xl {
  218.     padding-right: 25px;
  219. }
  221. .padding-bottom-xs {
  222.     padding-bottom: 5px;
  223. }
  225. .padding-bottom-sm {
  226.     padding-bottom: 10px;
  227. }
  229. .padding-bottom {
  230.     padding-bottom: 15px;
  231. }
  233. .padding-bottom-lg {
  234.     padding-bottom: 20px;
  235. }
  237. .padding-bottom-xl {
  238.     padding-bottom: 25px;
  239. }
  241. .padding-left-xs {
  242.     padding-left: 5px;
  243. }
  245. .padding-left-sm {
  246.     padding-left: 10px;
  247. }
  249. .padding-left {
  250.     padding-left: 15px;
  251. }
  253. .padding-left-lg {
  254.     padding-left: 20px;
  255. }
  257. .padding-left-xl {
  258.     padding-left: 25px;
  259. }
  261. .padding-lr-xs {
  262.     padding-left: 5px;
  263.     padding-right: 5px;
  264. }
  266. .padding-lr-sm {
  267.     padding-left: 10px;
  268.     padding-right: 10px;
  269. }
  271. .padding-lr {
  272.     padding-left: 15px;
  273.     padding-right: 15px;
  274. }
  276. .padding-lr-lg {
  277.     padding-left: 20px;
  278.     padding-right: 20px;
  279. }
  281. .padding-lr-xl {
  282.     padding-left: 25px;
  283.     padding-right: 25px;
  284. }
  286. .padding-tb-xs {
  287.     padding-top: 5px;
  288.     padding-bottom: 5px;
  289. }
  291. .padding-tb-sm {
  292.     padding-top: 10px;
  293.     padding-bottom: 10px;
  294. }
  296. .padding-tb {
  297.     padding-top: 15px;
  298.     padding-bottom: 15px;
  299. }
  301. .padding-tb-lg {
  302.     padding-top: 20px;
  303.     padding-bottom: 20px;
  304. }
  306. .padding-tb-xl {
  307.     padding-top: 25px;
  308.     padding-bottom: 25px;
  309. }

flex弹性布局

  1. .flex {
  2.     display: flex;
  3. }
  5. .basis-xs {
  6.     flex-basis: 20%;
  7. }
  9. .basis-sm {
  10.     flex-basis: 40%;
  11. }
  13. .basis-df {
  14.     flex-basis: 50%;
  15. }
  17. .basis-lg {
  18.     flex-basis: 60%;
  19. }
  21. .basis-xl {
  22.     flex-basis: 80%;
  23. }
  25. .flex-sub {
  26.     flex: 1;
  27. }
  29. .flex-twice {
  30.     flex: 2;
  31. }
  33. .flex-treble {
  34.     flex: 3;
  35. }
  37. .flex-direction {
  38.     flex-direction: column;
  39. }
  41. .flex-wrap {
  42.     flex-wrap: wrap;
  43. }
  45. .align-start {
  46.     align-items: flex-start;
  47. }
  49. .align-end {
  50.     align-items: flex-end;
  51. }
  53. .align-center {
  54.     align-items: center;
  55. }
  57. .align-stretch {
  58.     align-items: stretch;
  59. }
  61. .self-start {
  62.     align-self: flex-start;
  63. }
  65. .self-center {
  66.     align-self: flex-center;
  67. }
  69. .self-end {
  70.     align-self: flex-end;
  71. }
  73. .self-stretch {
  74.     align-self: stretch;
  75. }
  77. .align-stretch {
  78.     align-items: stretch;
  79. }
  81. .justify-start {
  82.     justify-content: flex-start;
  83. }
  85. .justify-end {
  86.     justify-content: flex-end;
  87. }
  89. .justify-center {
  90.     justify-content: center;
  91. }
  93. .justify-between {
  94.     justify-content: space-between;
  95. }
  97. .justify-around {
  98.     justify-content: space-around;
  99. }