RN开发-Flex
1、容器属性
(1). display : flex | inline-flex (块级伸缩容器 | 行内级伸缩容器)
(2). flex-direction : row | row-reverse | column | column-reverse (主轴线方向)
(3). flex-wrap : nowrap | wrap | wrap-reverse (主轴线空间不足是否换行及换行方向)
(4). flex-flow : row nowrap (2与3的交集属性)
(5). justify-content : flex-start | flex-end | center | space-between | space-around (主轴线对齐方式)
(6). align-items : flex-start | flex-end | center | baseline | stretch (交叉轴对齐方式)
(7). align-content : stretch | flex-start | flex-end | center | space-between | space-around (伸缩项目换行后对齐方式)
2、项目属性
(1). order 整数值(默认0),排序方式,越小越靠前
(2). flex-grow (默认0),放大比例(类似android:weight),空间不足不起作用
(3). flex-shrink(默认1),收缩比例,空间不足起作用
(4). flex-basis : auto | length (设置项目伸缩的基础值,剩余空间按比例伸缩)
(5). flex : none | flex-grow flex-shrink flex-basis (2,3,4交集)
(6). align-self : auto | flex-start | flex-end | center | baseline | stretch (用了设置单独的项目在交叉轴上的对齐方式)
3、RN中支持的属性:
(1). justifyContent (X轴对齐方式) : flex-start | flex-end | center | space-between | space-around
(2). flexDirection (布局方向) : row | row-reverse | column | column-reverse
(3). flexWrap (换行及换行方向) : nowrap | wrap | wrap-reverse
(4). alignItems (Y轴对齐方式) : flex-start | flex-end | center | baseline | stretch
(5). alignSelf (item在Y轴对齐方式): auto | flex-start | flex-end | center | baseline | stretch
(6). flex : flex
RN开发-Flex的更多相关文章
- iOS原生混合RN开发最佳实践
iOS原生混合RN开发详解 做过原生iOS开发或者Android开发的同学们肯定也都了解Hybrid,有一些Hybrid的开发经验,目前我们企业开发中运用最广泛的Hybrid App技术就是原生与H5 ...
- 基于RN开发的一款视频配音APP(开源)
在如今React.ng.vue三分天下的格局下,不得不让自己加快学习的脚步.虽然经常会陷入各种迷茫,学得越多会发现不会的东西也被无限放大,不过能用新的技术作出一些小项目小Demo还是会给自己些许自信与 ...
- RN 开发工具及发布release版本
2.1.开发工具推荐visual studio code https://code.visualstudio.com/docs/?dv=win 选择安装react native tool 就可以了 2 ...
- RN开发-Android原生交互
在使用RN开发过程中,难免有些原生功能需要要自己来实现,下面总结一下在使用RN与原生开发交互. 1.在原生代码中定义实现类 1.1 首先继承 ReactContextBaseJaveModule抽象 ...
- RN开发-IDE和API
一.开发工具 1.Visual Studio Code:微软IDE,轻量级,只有30+M大小 2.nuclide :仅支持Mac 3.WebStorm : JavaScript开发工具(IDE) 二. ...
- 微信小程序开发:Flex布局
微信小程序页面布局方式采用的是Flex布局.Flex布局,是W3c在2009年提出的一种新的方案,可以简便,完整,响应式的实现各种页面布局.Flex布局提供了元素在容器中的对齐,方向以及顺序,甚至他们 ...
- RN开发中的报错以及告警
报错一: Attempted to transition from state `RESPONDER_INACTIVE_PRESS_IN` to `RESPONDER_ACTIVE_LONG_PRES ...
- RN开发第二天
今天上午配置了windows的Android的环境,下载node,Python,安装Android SDK和Android studio,JSK,然后配置用户变量和系统变量,然后npm install ...
- 微信小程序开发--flex详细解读(2)
一.align-items和其参数 stretch / baseline 注:sretch只有在交叉轴没有设置固定长度的情况下才有作用 ...
随机推荐
- 从零开始一个个人博客 by asp.net core and angular(三)
这是第三篇了,第一篇只是介绍,第二篇介绍了api项目的运行和启动,如果api项目没什么问题了,调试都正常了,那基本上就没什么事了,由于这一篇是讲前端项目的,所以需要运行angular项目了,由于前端项 ...
- Umi 小白纪实(三)—— 震惊!路由竟然如此强大!
在<Umi 小白纪实(一)>中有提到过简单的路由配置和使用,但这只是冰山一角 借用一句广告词,Umi 路由的能量,超乎你的想象 一.基本用法 Umi 的路由根结点是全局 layout s ...
- Redis主从结构主节点执行写入后wait命令对性能的影响
这里的Redis主从结构可以是简单的主从,sentinel,redis cluster中的主从等. wait命令的作用:此命令将阻塞当前客户端,直到当前Session连接(主节点上)所有的写命令都被传 ...
- 一次线上nohup.out日志丢失的问题
今天有小伙伴求助,线上一个应用的nohup.out日志不更新了,但进程还是正常的.此时需要查看这个日志排查一些问题,这可怎么办呢? nohup.out文件的更新时间停留在了昨天9点36,日志也刚好打到 ...
- 39.Python模板结构优化-引入模板include标签、模板继承使用详解
在进行模板的构造时,不免有些模板的部分样式会相同,如果每一个模板都是重写代码的话,不仅在做的时候麻烦,而且在后期的维护上,也是相当的麻烦.所以我们可以将模板结构进行优化,优化可以通过:引入模板:模板继 ...
- 当页面提交时,执行相关JS函数检查输入是否合法
当页面提交时,执行相关JS函数检查输入是否合法 关键代码 <form action="tj.php" method="post" onSubmit=&qu ...
- 安装Gitlab到CentOS(YUM)
运行环境 系统版本:CentOS Linux release 7.3.1611 (Core) 软件版本:Gitlab-ce-11.10.1 硬件要求:最低2核4GB,建议4核8GB 安装过程 1.安装 ...
- 关于Dijk采访的一些感想
有效的程序员不应该浪费很多时间用于程序调试,他们应该一开始就不要把故障引入! 反复,一遍又一遍的尝试,真的会让人心烦,对于有的问题解决不了,其实有很多原因,写出来的程序其实是非常考验人的细节处理能力的 ...
- Windows下Anaconda安装、换源与更新
Anaconda指的是一个开源的Python发行版本,其包含了conda.Python等180多个科学包及其依赖项.当你尝试pip install xxx时出现各种意外和依赖问题,那么conda就是一 ...
- HashMap (JDK1.8) 分析
一.HashMap(JDK1.8) 1.基本知识.数据结构 (1)时间复杂度:用来衡量算法的运行时间. 参考:https://blog.csdn.net/qq_41523096/article/det ...