flex是个异常好用的属性，如不雅说有什么可以完全代替 float 和 position ，那么肯定长短它莫属了(固然如今还有很多不支撑 flex 的浏览器)。然而国内很多浏览器对 Flex 的支撑都不是很好，这里针对微信内置浏览器写了一套兼容写法。下面入正题。

起首照样大年夜两个版本的语法开端讲吧，这里照样假设flex容器为 .box ，子元素为 .item 。

旧语法篇

定义容器的display属性

.box{ 
 
    display: -moz-box; /*Firefox*/ 
 
    display: -webkit-box; /*Safari,Opera,Chrome*/ 
 
    display: box; 
 
}  

容器属性

.box{ 
 
    box-lines: single | multiple; 
 
    /*许可换行：不许可（默认） | 许可*/ 
 
}  

1.box-pack 属性

box-pack定义子元素主轴对齐方法。

.box{ 
 
    -moz-box-pack: center; /*Firefox*/ 
 
    -webkit-box-pack: center; /*Safari,Opera,Chrome*/ 
 
    box-pack: center; 
 
}  

box-pack属性总共有4个值：

.box{ 
 
    box-pack: start | end | center | justify; 
 
    /*主轴对齐：左对齐（默认） | 右对齐 | 居中对齐 | 阁下对齐*/ 
 
}  

2.box-align 属性

box-align定义子元故旧叉轴对齐方法。

.box{ 
 
    -moz-box-align: center; /*Firefox*/ 
 
    -webkit-box-align: center; /*Safari,Opera,Chrome*/ 
 
    box-align: center; 
 
}  

box-align属性总共有5个值：

.box{ 
 
    box-align: start | end | center | baseline | stretch; 
 
    /*交叉轴对齐：顶部对齐（默认） | 底部对齐 | 居中对齐 | 文本基线对齐 | 高低对齐并铺满*/ 
 
}  

3.box-direction 属性

.box{ 
 
    -webkit-box-pack: end; 
 
    -webkit-box-direction: reverse; 
 
    -webkit-box-orient: vertical; 
 
    -moz-flex-direction: column-reverse; 
 
    -webkit-flex-direction: 	
			
 1/7    1 2 3 4 5 6 下一页 尾页
	
			

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


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