手记：Flex 布局入门

#手记

1. 简介

• 容器 (Flex Container)
  
  • 块级元素、行内元素均可被设置为 Flex 容器；
  • 具有 display: flex | inline-flex; 属性的容器即被指定为 Flex 弹性布局；
  • 注意浏览器或内核兼容性：display: -webkit-flex;；
• 项目 (Flex Item)
  
  • Flex 容器的所有子元素自动成为容器成员，即 Flex 项目；
  • Flex 项目的 float, clear, vertical-align 等属性将失效；
• 两根轴线：
  
  • main start <= main axis => main end
  • cross start <= cross axis => cross end

2. 属性

2.1. 容器属性

2.1.1. flex-direction

• 定义 main axis 的方向；
• row（默认）：主轴为水平方向，起点在左端；
• row-reverse：主轴为水平方向，起点在右端；
• column：主轴为垂直方向，起点在上沿；
• column-reverse：主轴为垂直方向，起点在下沿；

2.1.2. flex-wrap

• 若一条轴线容纳不下，如何换行；
• nowrap（默认）：不换行；
• wrap：换行，首行在上方；
• wrap-reverse：换行，首行在下方；

2.1.3. flex-flow

• flex-direction 属性和 flex-wrap 属性的简写形式，默认值 row nowrap；

2.1.4. justify-content

• 定义项目在 cross axis 上的对齐方式；
• flex-start（默认）：左对齐；
• flex-end：右对齐；
• center：居中对齐；
• space-between：两端对齐，项目之间的间隔均相等；
• space-around：项目两侧的间隔均相等；

2.1.5. align-items

• 定义项目在 main axis 上的对齐方式；
• flex-start：交叉轴的起点对齐；
• flex-end：交叉轴的终点对齐；
• center：交叉轴的中点对齐；
• baseline：项目的第一行文字的基线对齐；
• stretch（默认值）：若项目未设置 height 或等于 auto，将占满整个容器的高度；

2.1.6. align-content

• 定义多根轴线的对齐方式；若项目仅有一根轴线，则该属性不起作用；
• flex-start：与交叉轴的起点对齐；
• flex-end：与交叉轴的终点对齐；
• center：与交叉轴的中点对齐；
• space-between：与交叉轴两端对齐，轴线之间的间隔均相等；
• space-around：每根轴线两侧的间隔均相等；
• stretch（默认值）：轴线占满整个交叉轴；

2.2. 项目属性

2.2.1. order

• 定义项目的排列顺序；整数，值越小，排列越靠前；
• <interger>，默认为 0；

2.2.2. flex-grow

• 定义项目的放大比例；数值；
• <number>，默认为 0；
• 若所有项目均设置 flex-grow: 1;，当有剩余空间时，它们将等分剩余空间；
• 即使存在剩余空间，设置 flex-grow: 0; 的项目也不放大；

2.2.2.2. flex-shrink

• 定义了项目的缩小比例；数值；
• <number>，默认为 1；
• 若所有项目均设置 flex-shrink: 1;，当空间不足时，它们都将等比例缩小；
• 即使空间不足，设置 flex-shrink: 0; 的项目也不缩小；

2.2.4. flex-basis

• 定义在分配多余空间之前，项目占据的主轴空间 (main size)；
• auto（默认）：即项目原本大小；
• 设置方式同 width，使项目占据固定空间；

2.2.5. flex

• flex-grow, flex-shrink, flex-basis 的简写形式，默认值 0 1 auto；
• auto：1 1 auto；
• none：0 0 auto；
• 建议优先书写这一属性，以便浏览器推算相关值；

2.2.6. align-self

• 允许单个项目有与其他项目不一样的对齐方式；
• 属性 flex-start | flex-end | center | baseline，可覆盖 align-items 属性；
• auto（默认）：表继承父元素 align-items 属性；
• stretch：如若没有父元素，默认占满；

3. 相关 snippets

3.1. 容器 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>

3.2. 项目 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>

附：参考

• 学习笔记：分享两个 snippets _阳富城
• Flex 布局教程：语法篇
• Flex 布局教程：实例篇