react-native Flex布局相关

react-native尺寸都是无单位的,表示的是与设备像素密度无关的逻辑像素点。这样的话,在不同屏幕尺寸下表现一致。(参考:设备像素、设备独立像素
react-native指定组件大小可以是:
1、使用width height指定固定的大小;
2、使用flex弹性布局(使用前提是:父容器尺寸不为0)。

布局样式相关属性:

一般常用的像margin、padding就不列举了,只列举新增的几个属性:
1、paddingHorizontal、paddingVertical、marginHorizontal、marginVertical(同时指定top+bottom或者left+right)。
2、flex布局相关:

flex:number
flexDirection:row | column | row-reverse | column-reverse 布局方向
justifyContent:flex-start | flex-end | center | space-between | space-around 主轴排列方式
alignItems: flex-start | flex-end | center | stretch 次轴排列方式
alignSelf:取值同上,多一个auto;自己沿次轴的排列方式,覆盖父元素的设置
flexWrap:wrap | nowrap 子元素的换行方式:弹性布局默认是单行的,nowrap代表不换行,wrap代表多行。

补充CSS3的知识:

弹性盒子:含弹性容器(display:flex | inline-flex)+弹性子元素。常用属性:
(某些属性设置为auto,可以实现居中 或者 占据剩余空间。)

//某些属性设置为auto,可以实现居中 或者 占据剩余空间
display: flex | inline-flex
flex: 3
flex-direction: 排列方向 定义主轴
flex-wrap: 子元素换行方式
justify-content: 主轴方向对齐方式
align-items: 次轴方向对齐方式
align-content: 补充flex-wrap,指定多行排列的子元素对齐方式
align-self:覆盖父元素的align-items
flex-flow: 同时指定flex-direction flex-wrap
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,697评论 1 92
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 176,569评论 25 709
  • 本文出自《React Native学习笔记》系列文章。 一款好的APP离不了一个漂亮的布局,本文章将向大家分享Re...
    CrazyCodeBoy阅读 37,594评论 3 278
  • 读书靠智商,交往看情商。碰到智商低的人同情,遇到情商低的人着急。明明重要的事情已经说了N个三遍,他仍不依不饶反复重...
    东升旭日阅读 4,831评论 6 30
  • 很多家长有这样的疑问,孩子的成绩在初中一直都名列前茅,为什么进入高中成绩就骤然下降呢? 可能是孩子松懈了下来;可能...
    江苏家学宝阅读 3,490评论 0 0

友情链接更多精彩内容