而新版的语法中，放大年夜的比例是直接按 flex-grow 的值来分派的，flex-grow 的缩放会覆盖 flex-shrink:0，看例子：

参数：

.item{ 
 
    box-flex: <value>; 
 
    /*伸缩：<一个浮点数，默认为0.0，即表示弗成伸缩，大年夜于0的值可伸缩，柔性相对>*/ 
 
  
 
    flex-grow: <number>; /* default 0 */ 
 
    /*放大年夜：默认0（即如不雅有残剩空间也不放大年夜，值为1则放大年夜，2是1的双倍大年夜小，以词攀类推）*/ 
 
  
 
    flex-shrink: <number>; /* default 1 */ 
 
    /*缩小：默认1（如不雅空间不足则会缩小，值为0不缩小）*/ 
 
} 

子元素的显示次序

.item{ 
 
    -webkit-box-ordinal-group: 1; 
 
    -moz-order: 1; 
 
    -webkit-order: 1; 
 
    order: 1; 
 
}  

【编辑推荐】

1. 现代前端开起身术栈
2. 前端模板的道理与实现
3. 前端机能优化以及解决筹划
4. 现代前端开起身术栈
5. 前端实现文件的断点续传

【义务编辑：枯木 TEL：（010）68476606】

　　推荐阅读

　　开源项目中经常出现的七种错误

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

本文标题：Flex布局新旧混合写法详解（兼容微信）

地址：http://www.17bianji.com/lsqh/36591.html

 1/2    1