@EncyKe
2016-10-26T02:49:53.000000Z
字数 5308
阅读 1954
#手记
display: flex | inline-flex;
属性的容器即被指定为 Flex 弹性布局;display: -webkit-flex;
;float
, clear
, vertical-align
等属性将失效;flex-direction
row
(默认):主轴为水平方向,起点在左端;row-reverse
:主轴为水平方向,起点在右端;column
:主轴为垂直方向,起点在上沿;column-reverse
:主轴为垂直方向,起点在下沿;flex-wrap
nowrap
(默认):不换行;wrap
:换行,首行在上方;wrap-reverse
:换行,首行在下方;flex-flow
flex-direction
属性和 flex-wrap
属性的简写形式,默认值 row nowrap
;justify-content
flex-start
(默认):左对齐;flex-end
:右对齐;center
:居中对齐;space-between
:两端对齐,项目之间的间隔均相等;space-around
:项目两侧的间隔均相等;align-items
flex-start
:交叉轴的起点对齐;flex-end
:交叉轴的终点对齐;center
:交叉轴的中点对齐;baseline
:项目的第一行文字的基线对齐;stretch
(默认值):若项目未设置 height
或等于 auto
,将占满整个容器的高度;align-content
flex-start
:与交叉轴的起点对齐;flex-end
:与交叉轴的终点对齐;center
:与交叉轴的中点对齐;space-between
:与交叉轴两端对齐,轴线之间的间隔均相等;space-around
:每根轴线两侧的间隔均相等;stretch(默认值)
:轴线占满整个交叉轴;order
<interger>
,默认为 0
;flex-grow
<number>
,默认为 0
;flex-grow: 1;
,当有剩余空间时,它们将等分剩余空间;flex-grow: 0;
的项目也不放大;flex-shrink
<number>
,默认为 1
;flex-shrink: 1;
,当空间不足时,它们都将等比例缩小;flex-shrink: 0;
的项目也不缩小;flex-basis
auto
(默认):即项目原本大小;width
,使项目占据固定空间;flex
flex-grow
, flex-shrink
, flex-basis
的简写形式,默认值 0 1 auto
;auto
:1 1 auto
;none
:0 0 auto
;align-self
flex-start | flex-end | center | baseline
,可覆盖 align-items
属性;auto
(默认):表继承父元素 align-items
属性;stretch
:如若没有父元素,默认占满;flex-container
<snippet>
<content><![CDATA[
display:-moz-box;
display:-webkit-box;
display:box;/* old */
display:-ms-flexbox;
display:flexbox; /* hybird */
display:-webkit-flex;
display:flex;
/**
* flex Direction For Old
* box-orient @param horizontal | vertical
* box-direction @param reverse
*/
-webkit-box-orient:${1:horizontal|vertical} ;
-moz-box-orient:$1 ;
box-orient:$1;
${2:/* delete ↓ if do not need! */
-webkit-box-direction: reverse;
-moz-box-direction: reverse;
box-direction: reverse;}
/**
* flex Direction For New
* @param: row | row-reverse | column | column-reverse
*/
-ms-flex-direction:${3:row|row-reverse|column|column-reverse};
-webkit-flex-direction:$3;
flex-direction:$3;
/**
* flex Wrap For Old
* box-lines @param single | multiple
*/
-moz-box-lines: ${4:single|multiple};
-webkit-box-lines: $4;
box-lines: $4;
/**
* flex Wrap For New
* box-lines @param nowrap | wrap | wrap-reverse
*/
-ms-flex-wrap: ${5:nowrap|wrap|wrap-reverse};
-webkit-flex-wrap:$5;
flex-wrap:$5;
/**
* flex Justify Content For Old And Hybird
* box-pack @param start | end | center | justify
*/
-webkit-box-pack: ${6:start|end|center|justify};
-moz-box-pack: $6;
box-pack: $6; /* old */
-ms-flex-pack:$6;
flex-pack:$6; /* hybird */
/**
* flex Justify Content For New
* justify-content @param flex-start | flex-end | center | space-between | space-around
*/
-webkit-justify-content: ${7:flex-start|flex-end|center|space-between|space-around};
justify-content: $7;
/**
* flex Align Items For Old And Hybird
* box-align @param start | end | center | baseline | stretch
*/
-webkit-box-align: ${8:start|end|center|baseline|stretch};
-moz-box-align: $8;
box-align: $8; /* old */
-ms-flex-pack: $8;
flex-pack: $8; /* hybird */
/**
* flex Align Items For New
* align-items @param flex-start | flex-end | center | baseline | stretch
*/
-webkit-webkit-align-items: ${9:flex-start|flex-end|center|baseline|stretch};
align-items: $9;
/**
* flex Align Conten For Hybird
* @param start | end | center | justify | distribute | stretch
*/
-ms-flex-line-pack: ${10:start|end|center|justify|distribute};
flex-line-pack:$10;
/**
* flex Align Conten For New
* @param flex-start | flex-end | center | space-between | space-around | stretch
*/
-webkit-webkit-align-content: ${11:flex-start|flex-end|center|space-between|space-around|stretch};
align-content: $11;
]]></content>
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
<tabTrigger>flex-container</tabTrigger>
<!-- Optional: Set a scope to limit where the snippet will trigger -->
<scope>source.css, source.less, source.scss, source.stylus, text.html</scope>
</snippet>
flex-item
<snippet>
<content><![CDATA[
/**
* flex item style for old and hybird
* box-flex @param <occupy_remaining_space_part_number>
* box-ordinal-group @param <item_pos_index>
* flex-order @param <item_pos_index>
*/
-webkit-box-flex: ${1:1};
-moz-box-flex: $1;
box-flex: $1;
${2:/* delete it if sort item default */
-webkit-box-ordinal-group: ${3:pos_index_number};
-moz-box-ordinal-group: $3;
box-ordinal-group: $3;
-ms-flex-order:$3;
flex-order:$3;}
/**
* flex item style for new
* flex-grow @param <occupy_remaining_space_part_number>
* flex-shrink @param <shrink_part_number>
* flex-basis @param <flex_item_basic_width>
*/
${4:/* dletete it with no need for expand, shrink, sort and basic width */
-ms-flex: ${5:0} ${6:1} ${7:auto} ;
-webkit-flex:$5 $6 $7;
flex:$5 $6 $7;
-webkit-order:${8:0};
order:$8;}
]]></content>
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
<tabTrigger>flex-item</tabTrigger>
<!-- Optional: Set a scope to limit where the snippet will trigger -->
<scope>source.css, source.less, source.scss, source.stylus, text.html</scope>
</snippet>