Flex布局

flex.png

/* flex布局 属性列举*/.box{    display: -webkit-flex;    display: flex;    flex-direction: row|row-reverse|colum|colum-reverse;    flex-wrap: nowrap|wrap|wrap-reverse;    flex-flow: row nowrap;/* 以上两者的简写，写法为默认值 */    justify-content: flex-start|flex-end|center|space-between|space-around;    align-items: flex-start|flex-end|center|stretch|baseline;    align-content: flex-start|flex-end|center|stretch|space-between|space-around;}.item{    order:0;    flex-grow: <number>; /* default 0 即如果存在剩余空间，也不放大。*/    flex-shrink: <number>; /* default 1 如果空间不足，该项目将缩小。*/    flex-basis: <length> | auto; /* default auto */          flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] ; /* 以上三者的简写，有两个值快捷值：auto (1 1 auto)  none (0 0 auto) */    align-self: auto | flex-start | flex-end | center | baseline | stretch;}

• 语法篇
• 实例篇

原著是一个有趣的人,若有侵权,请通知删除