css3-flex（伸缩盒/弹性盒子）布局

伸缩盒布局（css3）

1.网页分类

1）固定内容宽度（ wrapper width:1090px）淘宝，网易严选
2）内容宽度自适应 （响应式）腾讯视频、爱奇艺
3）完全响应式  H5网页【伸缩盒】
    微信打开的网页都属于完全响应式

伸缩盒，一般应用于响应式布局。

2.概念
主轴：伸缩盒元素排列的轴
交叉轴：与主轴垂直的轴

伸缩盒元素沿着主轴排列，默认情况下，伸缩盒元素在交叉轴上的距离是100%，在主轴的距离由内容决定

3.应用

伸缩盒容器:

display: flex; /display:inline-flex;/*声明当前元素为伸缩盒容器*/

flex-direction:row | row-reverse | column | column-reverse;/*声明子元素的布局方式*/ 

flex-wrap: wrap | nowarp | wrap-reverse; /*子元素是单行显示还是换行显示*/

flex-flow属性是flex-direction和flex-wrap的缩写

justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly; /*决定了水平方向子元素的对齐和分布方式*/

align-items:stretch | flex-start | flex-end | center | baseline; /*子元素相对于flex容器在垂直方向上的对齐方式*/

align-content:stretch | flex-start | center | space-between | space-around | space-evenly;/*控制多行项目的对齐方式，如果项目只有一行则不起作用 */  

伸缩盒元素：

order:<integer>;    /*整数值，默认值是0*/    

flex-grow:1; /*伸缩盒元素对于主轴上伸缩盒容器的剩余空间的分配 ，1表示占一份*/

flex-shrink:1; /*对于亏损空间的抵扣（收缩），不支持负数*/

flex-basis:auto; /*定义了在分配剩余空间之前元素的默认大小*/

flex:grow shrink basic; /*速写模式*/

align-self:auto | flex-start | flex-end | center | baseline | stretch;/*控制单独某一个flex子元素的垂直对齐方式*/

注意事项：flex子元素的设置float，clear，vertical-align属性都是没有用的。