display.scss 1.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788
  1. /*
  2. dispaly 相关样式 包括 dispaly flex
  3. */
  4. .dis-inline{
  5. display: inline;
  6. }
  7. .dis-inline-block{
  8. display: inline-block;
  9. }
  10. .dis-none{
  11. display: none!important;
  12. }
  13. .dis-block{
  14. display: block!important;
  15. }
  16. .flew{
  17. display: flex;
  18. //justify-content: center;
  19. //align-items: center;
  20. }
  21. .flew-row-wrap{
  22. flex-flow: row wrap;
  23. }
  24. .flew-row-nowrap{
  25. flex-flow: row nowrap;
  26. }
  27. //.flew-column-wrap{
  28. // flex-flow: column wrap;
  29. //}
  30. .flew-between{
  31. justify-content: space-between;
  32. }
  33. .flew-center{
  34. justify-content:center;
  35. }
  36. .flew-around{
  37. justify-content: space-around;
  38. }
  39. .flew-start{
  40. justify-content: flex-start;
  41. }
  42. .flew-end{
  43. justify-content: flex-end;
  44. }
  45. //
  46. .flew-align-start{
  47. align-items: flex-start;
  48. }
  49. .flew-align-end{
  50. align-items: flex-end;
  51. }
  52. .flew-align-center{
  53. align-items: center;
  54. }
  55. .flew-column{
  56. display: flex;
  57. flex-flow: column nowrap;
  58. }
  59. .flew-column-wrap{
  60. flex-flow: column wrap;
  61. }
  62. //.flew-column-between{
  63. // justify-content: space-between;
  64. //}
  65. //.flew-column-around{
  66. // justify-content: space-around;
  67. //}
  68. //.flex-column-start{
  69. // justify-content: flex-start;
  70. //}
  71. //.flex-column-end{
  72. // justify-content: flex-end;
  73. //}
  74. .flex-grow-1{
  75. flex-grow: 1;
  76. }
  77. .flex-none{
  78. flex:none;
  79. }
  80. .flex-auto{
  81. flex:auto;
  82. }