css3-flex(flexiblebox-elasticbox)布局

flexibleboxlayout(css3)1.网页分类1)固定内容宽度(wrapperwidth:1090px)淘宝、网易严选2)自适应内容宽度(responsive)腾讯视频,爱奇艺3）全响应式H5网页【拉伸框】微信打开的网页都是全响应式拉伸框，一般用在响应式布局中。2.概念主轴：flexbox元素排列的轴。横轴：垂直于主轴的轴。柔性盒元素沿主轴排列。默认情况下，flexbox元素在横轴上的距离为100%，在主轴上的距离由content决定3.应用flexbox容器：display:flex;/display:inline-flex;/*声明当前元素为flexbox容器*/flex-direction:row|行反转|栏目|column-reverse;/*声明子元素的布局*/flex-wrap:wrap|变形|换行；/*子元素是单行显示还是换行显示*/flex-flow属性是flex-direction和flex-wrap的缩写justify-content:flex-start|弹性端|中心|间隔|环绕空间|空间均匀；/*决定子元素在水平方向的对齐和分布*/align-items:stretch|弹性启动|弹性端|中心|基线；/*子元素相对于flex容器的垂直对齐方式*/align-content:stretch|弹性启动|中心|间隔|环绕空间|空间均匀；/*控制多行项目对齐，如果项目只有一行，则不起作用*/flexboxelement:order:;/*整数值，默认值为0*/flex-grow:1;/*flexboxelementformainaxis盒子容器剩余空间的分配，1表示1份*/flex-shrink:1;/*对于损失空间的扣除（收缩），不支持负数*/flex-basis:auto;/*在分配前定义元素的默认大小剩余空间*/flex:growshrinkbasic;/*速记模式*/align-self:auto|弹性启动|弹性端|中心|基线|拉紧;/*控制单个flex子元素的垂直对齐方式*/注意：为flex子元素设置float,clear,vertical-align属性没用