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

-webkit-box-orient: horizontal;

-moz-flex-direction: row;

-webkit-flex-direction: row;

flex-direction: row;

}

右到左

.box{ 
 
    -webkit-box-pack: end; 
 
    -webkit-box-direction: reverse; 
 
    -webkit-box-orient: horizontal; 
 
    -moz-flex-direction: row-reverse; 
 
    -webkit-flex-direction: row-reverse; 
 
    flex-direction: row-reverse; 
 
}

这琅绫侵补解释一点： box 写法的 box-direction 只是改变了子元素的排序，并没有改变对齐方法，须要新增一个 box-pack 来改变对齐方法。

上到下

.box{ 
 
    -webkit-box-direction: normal; 
 
    -webkit-box-orient: vertical; 
 
    -moz-flex-direction: column; 
 
    -webkit-flex-direction: column; 
 
    flex-direction: column; 
 
}

下到上

是否许可子元素伸缩

.item{ 
 
    -webkit-box-flex: 1.0; 
 
    -moz-flex-grow: 1; 
 
    -webkit-flex-grow: 1; 
 
    flex-grow: 1; 
 
}

.item{ 
 
    -webkit-box-flex: 1.0; 
 
    -moz-flex-shrink: 1; 
 
    -webkit-flex-shrink: 1; 
 
    flex-shrink: 1; 
 
}

膳绫擎是许可放大年夜，box语法中 box-flex 如不雅不是0就表示该子元素许可伸缩，而flex是分开的，膳绫擎 flex-grow 是许可放大年夜(默认不许可)，下面的 flex-shrink 是许可缩小(默认许可)。box-flex 默认值为0，也就是说，在默认的情况下，在两个浏览器中的表示是不一样的：

6/7 首页上一页 4 5 6 7 下一页尾页

　　推荐阅读

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

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

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

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

1/2 1