Flexbox
React Native中的Flexbox和CSS3中新加的Flexbox基本上是差不多的,CSS3 弹性盒子(Flexible Box 或 Flexbox),是一种布局方式,当页面需要适应不同的屏幕大小以及设备类型时,它依然能确保元素拥有更恰当的排布行为。对很多应用程序来说,当不使用浮动,且弹性容器的外边距也不需要与其内容的外边距合并时,弹性盒子模型比起方框模型要好一些。
许多设计师会发现弹性盒子模型更易于使用。弹性盒子中的子元素可以在各个方向上进行布局,并且能以弹性尺寸来适应显示空间。由于元素的显示顺序可以与它们在源代码中的顺序无关,定位子元素将变得更容易,并且能够用更简单清晰的代码来完成复杂的布局。这种无关性是仅限制于视觉呈现上的,语音顺序以及基于源代码顺序的导航均不受影响。
但是呢,相对于CSS中的Flexbox它的属性名称不太一样,而且属性值也少,默认值也许也不一样。
样式属性
Flex Direction
在组件style
中指定flexDirection
可以决定布局的主轴。就是指子元素排列方向,水平方向(row
)排列,竖直方向(column
)排列。默认值:column
我们以初始化的模板为例,在View中再添加3个View,并设置flexDirection
值为:row
export default class HHHHeats extends Component {
render() {
return (
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',//主轴排列方式
alignItems: 'stretch',//次轴排列方式
backgroundColor: '#F5FCFF',
flexDirection: 'row',//主轴方向
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
views: {
backgroundColor: 'green',
width: 100,
height: 100,
marginLeft: 10,
marginTop: 10,
}
});
效果:
Justify Content
上面的flexDirection
决定了方向,这个justifyContent
就是决定排列的方式。就是指子元素应该靠近主轴的起始端还是末尾段分布呢?亦或应该均匀分布?对应的这些可选项有:flex-start
、center
、flex-end
、space-around
以及space-between
。
将上面的justifyContent
设置为:flex-start
,效果如下图,可以看到子元素沿着主轴方向从起始位置开始排列(原为:center
)。
container: {
flex: 1,
justifyContent: 'flex-start',
alignItems: 'flex-start',
backgroundColor: '#F5FCFF',
flexDirection: 'row',//主轴方向
}
Align Items
flexDirection
决定了主轴方向,justifyContent
决定了子元素沿主轴方向的排列方式,而alignItems
就是沿次轴方向(与主轴垂直的方向,它有4种可能的字符串值:flex-start、flex-end、center、stretch。比如主轴是row
,那么次轴就是column
)的排列方式。
比如将上方代码修改,alignItems
属性值改为flex-end
:
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'flex-end',
backgroundColor: '#F5FCFF',
flexDirection: 'row',//主轴方向
}
其中有个属性值
stretch
表示拉长,或者拉宽。若要使其生效就不能给子元素设定高度或者宽度(取决于
flexDirection
,因为
alignItems
是次轴方向的排列方式),想想也是,若要有固定的宽度或者高度还怎么拉伸呢?
修改上方代码:
views: {
backgroundColor: 'green',
width: 100,
//height: 100, 注释掉
marginLeft: 10,
marginTop: 10,
}
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'stretch',
backgroundColor: '#F5FCFF',
flexDirection: 'row',//主轴方向
}
效果如下:
alignSelf
alignSelf
的属性值:auto
、flex-start
、flex-end
、center
、stretch
。它的作用是用于忽略父视图中的alignItems
设置的值。比如上方代码修改:
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'flex-start',
backgroundColor: '#F5FCFF',
flexDirection: 'row',//主轴方向
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
views: {
backgroundColor: 'green',
width: 100,
height: 100,
marginLeft: 10,
marginTop: 10,
alignSelf: 'flex-end'
}
});
alignItems
已经设置了flex-start
,在子元素中alignSelf
设置flex-end
最终显示的为flex-end
:
当值为
auto
则默认显示父视图中的
alignItems
值。