Flex布局新旧混合写法详解（兼容微信）

/*多主轴对齐：顶部对齐（默认） | 底部对齐 | 居中对齐 | 高低对齐并铺满 | 高低平均分布*/

}

子元素属性

.item{ 
 
    order: <integer>; 
 
    /*排序：数值袈浣小，越排前，默认为0*/ 
 
  
 
    flex-grow: <number>; /* default 0 */ 
 
    /*放大年夜：默认0（即如不雅有残剩空间也不放大年夜，值为1则放大年夜，2是1的双倍大年夜小，以词攀类推）*/ 
 
  
 
    flex-shrink: <number>; /* default 1 */ 
 
    /*缩小：默认1（如不雅空间不足则会缩小，值为0不缩小）*/ 
 
  
 
    flex-basis: <length> | auto; /* default auto */ 
 
    /*固定大年夜小：默认为0，可以设置px值，也可以设置百分比大年夜小*/ 
 
  
 
    flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] 
 
    /*flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto，*/ 
 
  
 
    align-self: auto | flex-start | flex-end | center | baseline | stretch; 
 
    /*零丁对齐方法：主动（默认） | 顶部对齐 | 底部对齐 | 居中对齐 | 高低对齐并铺满 | 文本基线对齐*/ 
 
}

兼容写法

起首是定义容器的 display 属性：

.box{ 
 
    display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */ 
 
    display: -moz-box; /* 老版本语法: Firefox (buggy) */ 
 
    display: -ms-flexbox; /* 混淆版本语法: IE 10 */ 
 
    display: -webkit-flex; /* 新版本语法: Chrome 21+ */ 
 
    display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */ 	
			 4/7   首页 上一页 2 3 4 5 6 7 下一页 尾页	
			

　　推荐阅读
　　开源项目中经常出现的七种错误
            
            
                
                    
                
                【51CTO.com快译】 启动一个新的开源项目可能会碰到一些艰苦。也许你脑筋里有一个很棒的设法主意，然则想把它>>>详细阅读


本文标题：Flex布局新旧混合写法详解（兼容微信）
地址：http://www.17bianji.com/lsqh/36591.html
 1/2    1