Weex Flexbox弹性布局使用

一、flexbox的关键字

　　1、在父视图上使用的关键字及对应的内容：

　　　　display: -webkit-box | -ms-flexbox | flex

　　　　flex-direction: row | column | row-reverse | 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: stretch | flex-start | flex-end | center | baseline

　　　　align-content: stretch | flex-start | flex-end | center | space-between | space-around　　　　

　　　　

　　2、在子视图上使用的关键字及对应的内容：

　　　　order: <integer> // 设置子元素在父视图中的顺序，值可为负数整、0、正整数，按从小到大排序，默认值：0

　　　　flex-grow: <integer> // 设置子元素在父视图中的占比，值为正整数，默认值：0

　　　　flex-shrink: <integer> // 设置子元素是否按照flexbox布局，值为1/0,  默认值： 1 按照flexbox布局

　　　　flex-basis: auto | <width> // 设置子视图的宽度，auto代表自适应，width则为自定义宽度

　　　　flex： auto | none | 1  // flex的组成： flex-grow, flex-shrink, flex-basis; auto (1 1 auto)／none (0 0 auto) / 1 代表占满父视图 

 

二、学习文档链接

　　1、https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties

　　2、http://www.ruanyifeng.com/blog/2015/07/flex-examples.html