flex_20220531144828.scss 837 B

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455
  1. .u-flex {
  2. display: flex;
  3. flex-direction: row;
  4. align-items: center;
  5. }
  6. /* 换行 */
  7. .u-flex-wrap {
  8. flex-wrap: wrap;
  9. }
  10. /* 不换行 */
  11. .u-flex-nowrap {
  12. flex-wrap: nowrap;
  13. }
  14. /* 垂直居中 */
  15. .u-col-center {
  16. align-items: center;
  17. }
  18. /* 顶部对齐 */
  19. .u-col-top {
  20. align-items: flex-start;
  21. }
  22. /* 底部对齐 */
  23. .u-col-bottom {
  24. align-items: flex-end;
  25. }
  26. /* 左边对齐 */
  27. .u-row-left {
  28. justify-content: flex-start;
  29. }
  30. /* 水平居中 */
  31. .u-row-center {
  32. justify-content: center;
  33. }
  34. /* 右边对齐 */
  35. .u-row-right {
  36. justify-content: flex-end;
  37. }
  38. /* 水平两端对齐,项目之间的间隔都相等 */
  39. .u-row-between {
  40. justify-content: space-between;
  41. }
  42. /* 水平每个项目两侧的间隔相等,所以项目之间的间隔比项目与父元素两边的间隔大一倍 */
  43. .u-row-around {
  44. justify-content: space-around;
  45. }