flex.scss 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257
  1. // .u-flex {
  2. // @include vue-flex(row);
  3. // }
  4. // .u-flex-x {
  5. // @include vue-flex(row);
  6. // }
  7. // .u-flex-y {
  8. // @include vue-flex(column);
  9. // }
  10. // .u-flex-xy-center {
  11. // @include vue-flex(row);
  12. // justify-content: center;
  13. // align-items: center;
  14. // }
  15. // .u-flex-x-center {
  16. // @include vue-flex(row);
  17. // justify-content: center;
  18. // }
  19. // .u-flex-y-center {
  20. // @include vue-flex(column);
  21. // justify-content: center;
  22. // }
  23. // flex布局
  24. .u-flex,
  25. .u-flex-row,
  26. .u-flex-x {
  27. @include flex;
  28. }
  29. .u-flex-y,
  30. .u-flex-column {
  31. @include flex(column);
  32. }
  33. .u-flex-x-center {
  34. @include flex;
  35. justify-content: center;
  36. }
  37. .u-flex-xy-center {
  38. @include flex;
  39. justify-content: center;
  40. align-items: center;
  41. }
  42. .u-flex-y-center {
  43. @include flex;
  44. align-items: center;
  45. }
  46. .u-flex-x-left {
  47. @include flex;
  48. }
  49. .u-flex-x-reverse,
  50. .u-flex-row-reverse {
  51. flex-direction: row-reverse;
  52. }
  53. .u-flex-y-reverse,
  54. .u-flex-column-reverse {
  55. flex-direction: column-reverse;
  56. }
  57. /* #ifndef APP-NVUE */
  58. // 此处为vue版本的简写,因为nvue不支持同时作用于两个类名的样式写法
  59. // nvue下只能写成class="u-flex-x u-flex-x-reverse的形式"
  60. .u-flex.u-flex-reverse,
  61. .u-flex-row.u-flex-reverse,
  62. .u-flex-x.u-flex-reverse {
  63. flex-direction: row-reverse;
  64. }
  65. .u-flex-column.u-flex-reverse,
  66. .u-flex-y.u-flex-reverse {
  67. flex-direction: column-reverse;
  68. }
  69. // 自动伸缩
  70. .u-flex-fill {
  71. flex: 1 1 auto
  72. }
  73. // 边界自动伸缩
  74. .u-margin-top-auto,
  75. .u-m-t-auto {
  76. margin-top: auto !important
  77. }
  78. .u-margin-right-auto,
  79. .u-m-r-auto {
  80. margin-right: auto !important
  81. }
  82. .u-margin-bottom-auto,
  83. .u-m-b-auto {
  84. margin-bottom: auto !important
  85. }
  86. .u-margin-left-auto,
  87. .u-m-l-auto {
  88. margin-left: auto !important
  89. }
  90. .u-margin-center-auto,
  91. .u-m-c-auto {
  92. margin-left: auto !important;
  93. margin-right: auto !important
  94. }
  95. .u-margin-middle-auto,
  96. .u-m-m-auto {
  97. margin-top: auto !important;
  98. margin-bottom: auto !important
  99. }
  100. /* #endif */
  101. // 换行
  102. .u-flex-wrap {
  103. flex-wrap: wrap;
  104. }
  105. // 反向换行
  106. .u-flex-wrap-reverse {
  107. flex-wrap: wrap-reverse;
  108. }
  109. // 主轴起点对齐
  110. .u-flex-start {
  111. justify-content: flex-start
  112. }
  113. // 主轴中间对齐
  114. .u-flex-center {
  115. justify-content: center
  116. }
  117. // 主轴终点对齐
  118. .u-flex-end {
  119. justify-content: flex-end
  120. }
  121. // 主轴等比间距
  122. .u-flex-between {
  123. justify-content: space-between
  124. }
  125. // 主轴均分间距
  126. .u-flex-around {
  127. justify-content: space-around
  128. }
  129. // 交叉轴起点对齐
  130. .u-flex-items-start {
  131. align-items: flex-start
  132. }
  133. // 交叉轴中间对齐
  134. .u-flex-items-center {
  135. align-items: center
  136. }
  137. // 交叉轴终点对齐
  138. .u-flex-items-end {
  139. align-items: flex-end
  140. }
  141. // 交叉轴第一行文字基线对齐
  142. .u-flex-items-baseline {
  143. align-items: baseline
  144. }
  145. // 交叉轴方向拉伸对齐
  146. .u-flex-items-stretch {
  147. align-items: stretch
  148. }
  149. // 以下属于项目(子元素)的类
  150. // 子元素交叉轴起点对齐
  151. .u-flex-self-start {
  152. align-self: flex-start
  153. }
  154. // 子元素交叉轴居中对齐
  155. .u-flex-self-center {
  156. align-self: center
  157. }
  158. // 子元素交叉轴终点对齐
  159. .u-flex-self-end {
  160. align-self: flex-end
  161. }
  162. // 子元素交叉轴第一行文字基线对齐
  163. .u-flex-self-baseline {
  164. align-self: baseline
  165. }
  166. // 子元素交叉轴方向拉伸对齐
  167. .u-flex-self-stretch {
  168. align-self: stretch
  169. }
  170. // 多轴交叉时的对齐方式
  171. // 起点对齐
  172. .u-flex-content-start {
  173. align-content: flex-start
  174. }
  175. // 居中对齐
  176. .u-flex-content-center {
  177. align-content: center
  178. }
  179. // 终点对齐
  180. .u-flex-content-end {
  181. align-content: flex-end
  182. }
  183. // 两端对齐
  184. .u-flex-content-between {
  185. align-content: space-between
  186. }
  187. // 均分间距
  188. .u-flex-content-around {
  189. align-content: space-around
  190. }
  191. // 全部居中对齐
  192. .u-flex-middle {
  193. justify-content: center;
  194. align-items: center;
  195. align-self: center;
  196. align-content: center
  197. }
  198. // 是否可以放大
  199. .u-flex-grow {
  200. flex-grow: 1
  201. }
  202. // 是否可以缩小
  203. .u-flex-shrink {
  204. flex-shrink: 1
  205. }