文档:https://reactnative.cn/docs/flexbox
1.简介
我们在 React Native 中使用 flexbox 规则来指定某个组件的子元素的布局。Flexbox 可以在不同屏幕尺寸上提供一致的布局结构。
一般来说,使用flexDirection
、alignItems
和 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 占据整个
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 [email protected] 举报,一经查实,本站将立刻删除。