关于css3弹性盒模型小结

flex弹性布局：为适应各种类型、尺寸及各种分辨率的设备

浏览器兼容性：2012年9月版本display:flxe|inline-flex;兼容IE11+、Firefox、Chrome、Safari以及移动端，iOS7.1-8.4需要加前缀-webkit。

//同block和inline,以下学名：块级伸缩容器和内联伸缩容器
display:flex | inline-flex;

概念：采用flex布局的元素称之为弹性容器（flex-content）；容器内的子元素称之为项目或条目或为弹性子元素（flex-item），各有各的称呼哈。容器中的flex-item会动态变化，与传统的行块属性不同的是，弹性盒布局与方向无关，是由开发人员自行布局。每个flex-item有两个尺寸对应DOM元素的宽和高：主轴尺寸（默认水平方向）和交叉轴尺寸。

flex-content 弹性容器

// 以下六种属性应用于弹性容器（flex-content）上
// 一、采用弹性布局
display:flex;
// 二、伸缩流方向  默认row:主轴为水平方向，row-reverse:主轴为水平反向，column：主轴为垂直方向，column-reverse：垂直反向
flex-direction:row;
// 三、指定flex-item若溢出容器是是否换行 默认nowrap，wrap：换行，wrap-reverse：反转换行
flex-wrap:wrap;
//以上两种属性可简写
flex-flow:row wrap;
//影响伸缩流方向的因素还有两个属性
direction：ltr 同row | rtl 同row-reverse | inhert;
writing-mode:horizontal-tb 同row | vertical-rl 同column| vertical-lr同column ;
//四、弹性子元素主轴对齐 默认flex-start:第一个子元素与主轴对齐，flex-end:最后一个子元素与主轴对齐，center：居中对齐，子元素向主轴中心靠齐且两边空白相同，space-between：两端对齐，第一个子元素靠齐左边，最后一个子元素靠齐右边，其他中间均匀分布且相邻元素间空白相同，space-around：扩散对齐，两端空白等于元素间空白的1/2
justify-content：flex-start;
//五、弹性子元素交叉轴对齐 默认stretch:子元素尽可能的占满空间，flex-start:子元素与交叉轴起始位置对齐，flex-end:子元素与交叉轴结束位置对齐，center：居中对齐，子元素向交叉轴中心靠齐且两边空白相同，baseline：实例，基准线对齐
align-items:flex-start;   //width、height属性优先级交于此属性
//六、交叉轴空白处理  默认:stetch，flex-start/flex-end/center/space-between/space-around，类似于justify-content
align-content:flex-start; //只有在flex-wrap属性且子元素存在多行时生效

flex-item 弹性子元素

//以下六种属性应用与弹性子元素（flex-item）上
//一、order属性：默认为0，显示顺序，兼顾页面样式和可访问性，可以单独将想要的布局到前面，数字越小越靠前，整数
flex-item:last-child{ order:-1; }
//二、flex-grow属性：扩展比率，分配剩余空间
flex-item:first-child{ flex-grow:2; }
//三、flex-shrink属性:收缩比率，当所有子元素填满整个容器时生效
flex-item:first-child{ flex-shrink:2; }
//四、flex-basis属性：伸缩基准线，子元素在主轴方向的初始大小。若值为0，分配所有空间，若值为auto，则其初始大小为设置宽度（内容宽度），再分配剩余空间
flex-item:first-child{ flex-basis:100px; /*或flex-basis:10%;*/ }
//五、flex属性（以上三种属性的缩写）：伸缩性:flex-grow flex-shrink flex-basis;当flex为关键字none或存在auto时，flex-basis为auto；若flex只有数字值，则flex-basis为0%
flex-item:last-child{ flex:none; } //flex:0 0 auto; 宽度为原始宽度，不发生扩展或伸缩
flex-item:last-child{ flex:auto; } //flex:1 1 auto; 除原始宽度外，同时分配剩余空间
flex-item:last-child{ flex:0; } //flex:0 1 0%; 收缩到最小宽度
flex-item:last-child{ flex:1; } //flex:1 1 0%;分配所有宽度
flex-item:last-child{ flex:0 auto; } //flex:0 1 auto; 除原始宽度外，同时分配剩余空间（只收缩，不扩展）
flex-item:last-child{ flex:0 1; } //flex:0 1 0%; 收缩到最小宽度

//六、align-self属性：单个子元素在交叉轴的对齐方式，优先于弹性容器属性align-items，类似于继承了align-items的值，若单独设置，则级别优先于继承,默认auto|flex-start|flex-end|baseline|strecth|center
flex-item:last-chil{ align-self: flex-start; }

贴上w3c官方网站文档：https://www.w3.org/TR/css-flexbox-1/