h5 弹性盒

给父元素设置
1、设置弹性盒
display:flex; //设置弹性盒子
display:inline-flex; //设置行内元素设置弹性盒

-moz 是火狐的内核
-ms 是ie的内核
-o 是欧朋的内核
-webkit是谷歌浏览器和safair（苹果浏览器）的内核
1）display:-webkit-flex //webkit是浏览器的内核
注：设置flex布局以后，子元素的float，clear和vertical-align属性将失效
2、设置父元素的一些属性
flex-dirextion 排列方向 row（默认）|row-reverse|column|column-reverse
flex-wrap 设置弹性盒里面的子元素换行 no-wrap(不换行)|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
align-content 多轴对齐的方式 flex-start|flex-end|center|baseline|stretch
3、子元素的属性
order 排列顺序 数值越小越靠前，默认为0
flex-grow 放大比例，默认为0
如果所有项目的flex-grow属性为1，则他们将等分剩余空间，如果一个项目flex-grow为2，其他项目都为1，则前者占据的剩余空间将比其他项多1倍
flex-shrink 属性定义了项目的缩小比例，默认是1，如果空间不足，项目则缩小
负值对该属性无效
flex-basis 项目占据固定空间 默认值auto
flex 复合属性 flex-grow,flex-shrink,flex-basis 默认0 1 auto
快捷值 auto(1 1 auto)和none(0 0 auto)
align-self 单个项目与其他项目不一样的对齐方式，可覆盖align-items属性，默认auto
继承父元素的align-items属性，如没有父元素，则等同于stretch
align-self: auto | flex-start | flex-end | center | baseline | stretch;

转载于:https://www.cnblogs.com/mapsxy/p/9602767.html