flex布局

flexDirection(column,row)

1
默认值:column,即竖直方向

justifyContent(flex-start, center, flex-end, space-around, space-between)

1
2
3
默认值:flex-start
当为column,竖直看;
当为row,水平看;

alignItem(flex-start, center, flex-end, stretch)

1
2
默认值:stretch
与justifyContent相反

stretch

1
2
3
4
5
起效条件
当flexDirection为row,且未指定height

当flexDirection为cloumn,且未指定width,
该起效条件下,若alignItem指定其他值,不显示。

flex

1
2
3
4
子组件能够充满父容器剩余空间必须父容器的尺寸不为 0 ,
如果父容器既没有指定width、height,同时也没有设定flex:1,
那么子组件将不会显示(即使子组件设置了flex)。
父组件默认设置flex:1(默认充满整个剩余空间)

原则

1
方向:从左到右或从上到下
作者

苏同

发布于

2017-10-10

更新于

2017-10-10

许可协议