基础知识:
-
flex
属性flex
属性将会控制所属的view
的大小为剩余空间的比例: -
如果拥有该属性的控件的sibling没有
flex
属性,则该控件就布满剩余的空间; -
如果其子控件具备flex属性,则就和android原生中的weight具备一样的功能。
-
给具备
flex
属性的view添加height
(或者width
,这需要看flexDirection
的属性),其实是没有什么用的。(和android原生的weight
属性一致)。 -
flexDirection
属性
表明使用flex布局的控件应该在什么方向进行排列,该属性只有
-
column
(列) -
row
(行,默认属性)
这两个属性。
-
justifyContent
属性
表明通过flexDirection
属性声明后,在其声明的方向上(row或者column)进行的排列情况
-
flex-start
(默认属性)flex-start
-
center
center
-
flex-end
flex-end
-
space-around
space-around
-
space-between
space-between
-
alignItems
属性
表明使用justfyContent
属性方向上的主轴,而以另外一个方向为次轴上的排列。
如果没有
height
属性,则默认是包裹子view的height高度
下面是示例(其中justyfyContent
属性值为:center)
-
flex-start
flex-start
-
center
center
-
flex-end
flex-end
-
stretch
stretch
其中flex-start
和stretch
的区别是:
如果使用flexbox进行布局的字控件没有
height
这个属性,那么
-
flex-start
flex-start
就什么都没了 -
stretch
stretch
则会自动在其次轴上伸展(stretch)至父的高度(长度)
网友评论