flex.css 1.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758
  1. .flex{
  2. display:-webkit-box;
  3. display:-webkit-flex;
  4. display:flex;
  5. }
  6. /* 垂直排列 */
  7. .flex_co{
  8. display: flex;
  9. display: -webkit-flex;
  10. flex-direction: column;
  11. }
  12. /* 垂直水平居中 */
  13. .f_xy_c{
  14. -webkit-justify-content: center;
  15. justify-content: center;
  16. -webkit-align-items: center;
  17. align-items: center;
  18. }
  19. .f_y_c{
  20. -webkit-align-items: center;
  21. align-items: center;
  22. }
  23. .f_x_c{
  24. -webkit-justify-content: center;
  25. justify-content: center;
  26. }
  27. /* 存在剩余空间放大 */
  28. .f_g_1{
  29. -webkit-flex-grow:1;
  30. flex-grow:1;
  31. }
  32. /* 空间不够也不缩小 */
  33. .f_s_0{
  34. -webkit-flex-shrink:0;
  35. flex-shrink:0;
  36. }
  37. .f_x_s{
  38. -webkit-justify-content: space-between;
  39. justify-content: space-between;
  40. }
  41. .f_y_s{
  42. align-items: flex-start;
  43. -webkit-align-items: flex-start;
  44. }
  45. .f_wrap{
  46. -webkit-flex-wrap: wrap;
  47. flex-wrap: wrap;
  48. }
  49. .ellipsis{
  50. white-space:nowrap;/*强制文本在一行内显示*/
  51. text-overflow:ellipsis; /*溢出省略号,支持ie、safari(webkit)*/
  52. -o-text-overflow:ellipsis; /*溢出省略号,支持opera*/
  53. overflow:hidden;/*溢出隐藏*/
  54. }