flex.css 1.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071
  1. /* felx布局 */
  2. .flex{
  3. display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
  4. display: -moz-flex; /* Firefox 18+ */
  5. display: -ms-flexbox; /* IE 10 */
  6. display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */
  7. }
  8. /*伸缩流方向*/
  9. .flex_column{
  10. -webkit-box-orient: vertical;
  11. -ms-flex-direction: column;
  12. -webkit-flex-direction: column;
  13. flex-direction: column;
  14. }
  15. /*主轴对齐*/
  16. .justify_center{
  17. -webkit-box-pack: center;
  18. -ms-flex-pack: center;
  19. -webkit-justify-content: center;
  20. justify-content: center;
  21. }
  22. .justify_end{
  23. -webkit-box-pack: end;
  24. -ms-flex-pack: end;
  25. -webkit-justify-content: flex-end;
  26. justify-content: flex-end;
  27. }
  28. .justify_between{
  29. -webkit-box-pack: justify;
  30. -ms-flex-pack: justify;
  31. -webkit-justify-content: space-between;
  32. justify-content: space-between;
  33. }
  34. /*侧轴对齐*/
  35. .align_start{
  36. -webkit-box-align: start;
  37. -ms-flex-align: start;
  38. -webkit-align-items: flex-start;
  39. align-items: flex-start;
  40. }
  41. .align_end{
  42. -webkit-box-align: end;
  43. -ms-flex-align: end;
  44. -webkit-align-items: flex-end;
  45. align-items: flex-end;
  46. }
  47. .align_center{
  48. -webkit-box-align: center;
  49. -ms-flex-align: center;
  50. -webkit-align-items: center;
  51. align-items: center;
  52. }
  53. .align_baseline{
  54. -webkit-box-align: baseline;
  55. -ms-flex-align: baseline;
  56. -webkit-align-items: baseline;
  57. align-items: baseline;
  58. }
  59. /*伸缩性*/
  60. .flex_auto{
  61. -webkit-box-flex: 1;
  62. -ms-flex: auto;
  63. -webkit-flex: auto;
  64. flex: auto;
  65. }
  66. .flex_1{
  67. -webkit-box-flex: 1;
  68. -ms-flex: 1;
  69. -webkit-flex: 1;
  70. flex: 1;
  71. }