搬运工--Weex踩坑日记（二）

.wrapper{background-color:azure;弹性方向：列；宽度：750px;}.tab-container{背景颜色：米色;宽度：750px；flex:1;}.footer{背景色:rgba(255,255,0,1);宽度：750px；高度：100px；弹性：0；边框半径：10px10px00；padding:5px5px5px5px;}固定footer实现Weex默认是flex布局，只支持flex布局。使用flex布局实现footer固定在底部。这里可以参考菜鸟教程的Flex布局语法教程一文实现。.wrapper{background-color:azure;弹性方向：列；宽度：750px;}.tab-container{背景颜色：米色;宽度：750px；flex:1;}.footer{背景色:rgba(255,255,0,1);宽度：750px；高度：100px；弹性：0；边框半径：10px10px00；padding:5px5px5px5px;}这里重点是wrapper中的flex-direction:column来设置flex排列方向。在主页的tab-container中设置flex:1，在footer中设置flex:0，使tab-container自动填空，footer大小固定。这里的主要陷阱是：Weex似乎不支持像div.footer这样的选择器。Weex不支持flex的缩写：|<弹性收缩>|<'弹性基础>。并且不支持flex-shrink和flex-basis属性。Weex不支持百分比布局，也就是说像width:100%这样设置宽度只在网页有效，在Android端无效。Weex默认使用750px作为屏幕宽度，任何大小设置都会按比例转换为750px。例如，width:50%相当于width:375px。综上所述，weex对css的支持有限，原本适用于web端的解决方案不一定适用于weex。如果熟悉weex文档，可以在一定程度上避免很多问题。因此，出现问题后，请先查阅其文档。