[关闭]
@EncyKe 2016-10-26T02:49:53.000000Z 字数 5308 阅读 1591

手记:Flex 布局入门

#手记



1. 简介

2. 属性

2.1. 容器属性

2.1.1. flex-direction

2.1.2. flex-wrap

2.1.3. flex-flow

2.1.4. justify-content

2.1.5. align-items

2.1.6. align-content

2.2. 项目属性

2.2.1. order

2.2.2. flex-grow

2.2.2.2. flex-shrink

2.2.4. flex-basis

2.2.5. flex

2.2.6. align-self

3. 相关 snippets

3.1. 容器 flex-container

  1. <snippet>
  2. <content><![CDATA[
  3. display:-moz-box;
  4. display:-webkit-box;
  5. display:box;/* old */
  6. display:-ms-flexbox;
  7. display:flexbox; /* hybird */
  8. display:-webkit-flex;
  9. display:flex;
  10. /**
  11. * flex Direction For Old
  12. * box-orient @param horizontal | vertical
  13. * box-direction @param reverse
  14. */
  15. -webkit-box-orient:${1:horizontal|vertical} ;
  16. -moz-box-orient:$1 ;
  17. box-orient:$1;
  18. ${2:/* delete ↓ if do not need! */
  19. -webkit-box-direction: reverse;
  20. -moz-box-direction: reverse;
  21. box-direction: reverse;}
  22. /**
  23. * flex Direction For New
  24. * @param: row | row-reverse | column | column-reverse
  25. */
  26. -ms-flex-direction:${3:row|row-reverse|column|column-reverse};
  27. -webkit-flex-direction:$3;
  28. flex-direction:$3;
  29. /**
  30. * flex Wrap For Old
  31. * box-lines @param single | multiple
  32. */
  33. -moz-box-lines: ${4:single|multiple};
  34. -webkit-box-lines: $4;
  35. box-lines: $4;
  36. /**
  37. * flex Wrap For New
  38. * box-lines @param nowrap | wrap | wrap-reverse
  39. */
  40. -ms-flex-wrap: ${5:nowrap|wrap|wrap-reverse};
  41. -webkit-flex-wrap:$5;
  42. flex-wrap:$5;
  43. /**
  44. * flex Justify Content For Old And Hybird
  45. * box-pack @param start | end | center | justify
  46. */
  47. -webkit-box-pack: ${6:start|end|center|justify};
  48. -moz-box-pack: $6;
  49. box-pack: $6; /* old */
  50. -ms-flex-pack:$6;
  51. flex-pack:$6; /* hybird */
  52. /**
  53. * flex Justify Content For New
  54. * justify-content @param flex-start | flex-end | center | space-between | space-around
  55. */
  56. -webkit-justify-content: ${7:flex-start|flex-end|center|space-between|space-around};
  57. justify-content: $7;
  58. /**
  59. * flex Align Items For Old And Hybird
  60. * box-align @param start | end | center | baseline | stretch
  61. */
  62. -webkit-box-align: ${8:start|end|center|baseline|stretch};
  63. -moz-box-align: $8;
  64. box-align: $8; /* old */
  65. -ms-flex-pack: $8;
  66. flex-pack: $8; /* hybird */
  67. /**
  68. * flex Align Items For New
  69. * align-items @param flex-start | flex-end | center | baseline | stretch
  70. */
  71. -webkit-webkit-align-items: ${9:flex-start|flex-end|center|baseline|stretch};
  72. align-items: $9;
  73. /**
  74. * flex Align Conten For Hybird
  75. * @param start | end | center | justify | distribute | stretch
  76. */
  77. -ms-flex-line-pack: ${10:start|end|center|justify|distribute};
  78. flex-line-pack:$10;
  79. /**
  80. * flex Align Conten For New
  81. * @param flex-start | flex-end | center | space-between | space-around | stretch
  82. */
  83. -webkit-webkit-align-content: ${11:flex-start|flex-end|center|space-between|space-around|stretch};
  84. align-content: $11;
  85. ]]></content>
  86. <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
  87. <tabTrigger>flex-container</tabTrigger>
  88. <!-- Optional: Set a scope to limit where the snippet will trigger -->
  89. <scope>source.css, source.less, source.scss, source.stylus, text.html</scope>
  90. </snippet>

3.2. 项目 flex-item

  1. <snippet>
  2. <content><![CDATA[
  3. /**
  4. * flex item style for old and hybird
  5. * box-flex @param <occupy_remaining_space_part_number>
  6. * box-ordinal-group @param <item_pos_index>
  7. * flex-order @param <item_pos_index>
  8. */
  9. -webkit-box-flex: ${1:1};
  10. -moz-box-flex: $1;
  11. box-flex: $1;
  12. ${2:/* delete it if sort item default */
  13. -webkit-box-ordinal-group: ${3:pos_index_number};
  14. -moz-box-ordinal-group: $3;
  15. box-ordinal-group: $3;
  16. -ms-flex-order:$3;
  17. flex-order:$3;}
  18. /**
  19. * flex item style for new
  20. * flex-grow @param <occupy_remaining_space_part_number>
  21. * flex-shrink @param <shrink_part_number>
  22. * flex-basis @param <flex_item_basic_width>
  23. */
  24. ${4:/* dletete it with no need for expand, shrink, sort and basic width */
  25. -ms-flex: ${5:0} ${6:1} ${7:auto} ;
  26. -webkit-flex:$5 $6 $7;
  27. flex:$5 $6 $7;
  28. -webkit-order:${8:0};
  29. order:$8;}
  30. ]]></content>
  31. <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
  32. <tabTrigger>flex-item</tabTrigger>
  33. <!-- Optional: Set a scope to limit where the snippet will trigger -->
  34. <scope>source.css, source.less, source.scss, source.stylus, text.html</scope>
  35. </snippet>

附:参考

添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注