其他分享
首页 > 其他分享> > react-native设计之使用Flexbox布局

react-native设计之使用Flexbox布局

作者:互联网

文档:https://reactnative.cn/docs/flexbox

 

1.简介

 

我们在 React Native 中使用 flexbox 规则来指定某个组件的子元素的布局。Flexbox 可以在不同屏幕尺寸上提供一致的布局结构。

一般来说,使用flexDirectionalignItems和 justifyContent三个样式属性就已经能满足大多数布局需求。

React Native 中的 Flexbox 的工作原理和 web 上的 CSS 基本一致,当然也存在少许差异。

首先是默认值不同:flexDirection的默认值是column而不是row,而flex也只能指定一个数字值。

 

2.Flex

 

flex 属性决定元素在主轴上占用可用区域的百分比。整个区域会根据每个元素设置的 flex 属性值被分割成多个部分。

在下面的例子中,在设置了flex: 1的容器 view 中,有红色,黄色和绿色三个子 view。

红色 view 设置了flex: 1,黄色 view 设置了flex: 2,绿色 view 设置了flex: 3

1+2+3 = 6,这意味着红色 view 占据整个

标签:flex,默认值,Flexbox,布局,react,设置,view,native
来源: https://blog.csdn.net/qq_27868061/article/details/115434983