一、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

　　　　

轉載于:https://www.cnblogs.com/PLA-Artillery/p/7605305.html

總結

以上是生活随笔為你收集整理的Weex Flexbox弹性布局使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。