因为旧版语法并没有列入W3C标准，所以这里不消写 display:box ，下面的语法也是一样的。

这里还要留意的是，如不雅子元素是行内元素，在很多情况下都要应用 display:block 或 display:inline-block 把行内人元素变成块元素(例如应用 box-flex 属性)，这也是旧版语法和新版语法的差别之一。

这里还有一点，就是新旧语法的算法是不一样的，假设 box-flex 的值不等于0，旧语法中，如不雅有多余的空间，box-flex 的值袈浣大年夜，解释空白部分的┞芳比越多，反之亦然：

子元素主轴对齐方法

.box{ 
 
    -webkit-box-pack: center; 
 
    -moz-justify-content: center; 
 
    -webkit-justify-content: center; 
 
    justify-content: center; 
 
} 

定义容器的display属性

这里旧版语法有4个参数，而新版语法有5个参数，兼容写法新版语法的 space-around 是弗采取的：

.box{ 
 
    box-pack: start | end | center | justify; 
 
    /*主轴对齐：左对齐（默认） | 右对齐 | 居中对齐 | 阁下对齐*/ 
 
  
 
    justify-content: flex-start | flex-end | center | space-between | space-around; 
 
    /*主轴对齐方法：左对齐（默认） | 右对齐 | 居中对齐 | 两端对齐 | 平均分布*/ 
 
}  

子元故旧叉轴对齐方法

.box{ 
 
    -webkit-box-align: center; 
 
    -moz-align-items: center; 
 
    -webkit-align-items: center; 
 
    align-items: center; 
 
} 

这里的参数除了写法不合，其实是功能是一样的：

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

子元素的显示偏向

子元素的显示偏向可经由过程 box-direction + box-orient + flex-direction 实现，下面请看实例：

左到右

box{ 
 
    -webkit-box-direction: normal; 	
			
 5/7   首页 上一页 3 4 5 6 7 下一页 尾页
	
			

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


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