2.box-ordinal-group 属性

box-ordinal-group定义子元素的显示次序，数值袈浣小越排前。

.item{ 
 
    -moz-box-ordinal-group: 1; /*Firefox*/ 
 
    -webkit-box-ordinal-group: 1; /*Safari,Opera,Chrome*/ 
 
    box-ordinal-group: 1; 
 
}  

.item{ 
 
    box-ordinal-group: <integer>; 
 
    /*显示次序：<一个整数，默认为1，数值袈浣小越排前>*/ 
 
}  

新版语法

不足之处请多指导。

.box{ 
 
    display: -webkit-flex; /*webkit*/ 
 
    display: flex; 
 
} 
 
  
 
/*行内flex*/ 
 
.box{ 
 
    display: -webkit-inline-flex; /*webkit*/ 
 
    display:inline-flex; 
 
}  

容器样式

.box{ 
 
    flex-direction: row | row-reverse | column | column-reverse; 
 
    /*主轴偏向：左到右（默认） | 右到左 | 上到下 | 下到上*/ 
 
  
 
    flex-wrap: nowrap | wrap | wrap-reverse; 
 
    /*换行：不换行（默认） | 换行 | 换行并第一行鄙人方*/ 
 
  
 
    flex-flow: <flex-direction> || <flex-wrap>; 
 
    /*主轴偏向和换内行写*/ 
 
  
 
    justify-content: flex-start | flex-end | center | space-between | space-around; 
 
    /*主轴对齐方法：左对齐（默认） | 右对齐 | 居中对齐 | 两端对齐 | 平均分布*/ 
 
  
 
    align-items: flex-start | flex-end | center | baseline | stretch; 
 
    /*交叉轴对齐方法：顶部对齐（默认） | 底部对齐 | 居中对齐 | 高低对齐并铺满 | 文本基线对齐*/ 	
			
 3/7   首页 上一页 1 2 3 4 5 6 下一页 尾页
	
			

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


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