flex.css 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126
  1. .flex {
  2. display: -webkit-box;
  3. display: -webkit-flex;
  4. display: flex;
  5. }
  6. .flex-row {
  7. display: -webkit-box;
  8. display: -webkit-flex;
  9. display: flex;
  10. -webkit-box-orient: horizontal;
  11. -webkit-flex-direction: row;
  12. flex-direction: row;
  13. }
  14. .flex-col {
  15. display: -webkit-box;
  16. display: -webkit-flex;
  17. display: flex;
  18. -webkit-box-orient: vertical;
  19. -webkit-flex-direction: column;
  20. flex-direction: column;
  21. }
  22. .flex-grow-0 {
  23. min-width: 0;
  24. -webkit-box-flex: 0;
  25. -webkit-flex-grow: 0;
  26. -ms-flex-positive: 0;
  27. flex-grow: 0;
  28. -webkit-flex-shrink: 0;
  29. -ms-flex-negative: 0;
  30. flex-shrink: 0;
  31. }
  32. .flex-grow-1 {
  33. min-width: 0;
  34. -webkit-box-flex: 1;
  35. -webkit-flex-grow: 1;
  36. -ms-flex-positive: 1;
  37. flex-grow: 1;
  38. -webkit-flex-shrink: 1;
  39. -ms-flex-negative: 1;
  40. flex-shrink: 1;
  41. }
  42. .flex-x-center {
  43. display: -webkit-box;
  44. display: -webkit-flex;
  45. display: flex;
  46. -webkit-box-pack: center;
  47. -webkit-justify-content: center;
  48. -ms-flex-pack: center;
  49. justify-content: center;
  50. }
  51. .flex-x-end{
  52. justify-content: flex-end;
  53. }
  54. .flex-center {
  55. display: -webkit-box;
  56. display: -webkit-flex;
  57. display: flex;
  58. -webkit-box-align: center;
  59. -webkit-align-items: center;
  60. -ms-flex-align: center;
  61. -ms-grid-row-align: center;
  62. align-items: center;
  63. -webkit-box-pack: center;
  64. -webkit-justify-content: center;
  65. -ms-flex-pack: center;
  66. justify-content: center;
  67. }
  68. .flex-y-center {
  69. display: -webkit-box;
  70. display: -webkit-flex;
  71. display: flex;
  72. -webkit-box-align: center;
  73. -webkit-align-items: center;
  74. -ms-flex-align: center;
  75. -ms-grid-row-align: center;
  76. align-items: center;
  77. }
  78. .flex-y-bottom {
  79. display: -webkit-box;
  80. display: -webkit-flex;
  81. display: flex;
  82. -webkit-box-align: end;
  83. -webkit-align-items: flex-end;
  84. -ms-flex-align: end;
  85. -ms-grid-row-align: flex-end;
  86. align-items: flex-end;
  87. }
  88. .flex-y-baseline{
  89. align-items: baseline;
  90. }
  91. .box-pack-between {
  92. display: -webkit-box;
  93. display: -webkit-flex;
  94. display: flex;
  95. -webkit-box-pack: justify;
  96. -moz-justify-content: space-between;
  97. -webkit-justify-content: space-between;
  98. justify-content: space-between;
  99. }
  100. /*主轴左右不留白*/
  101. .box-pack-between {
  102. display: -webkit-box;
  103. display: -webkit-flex;
  104. display: flex;
  105. -webkit-box-pack: justify;
  106. -moz-justify-content: space-between;
  107. -webkit-justify-content: space-between;
  108. justify-content: space-between;
  109. }
  110. .wrap {
  111. flex-wrap: wrap;
  112. }
  113. .flex-nowarp {
  114. flex-wrap: nowrap;
  115. }