重点:

  1】react native 下的弹性布局名字叫:flexDirection

  2】flexDirection的默认值是column而不是row,而flex也只能指定一个数字值。

  3】使用flexDirectionalignItems和 justifyContent三个样式属性就已经能满足大多数布局需求

  

  在React-Navive中使用flexbox,目前只支持以下几种属性:

   1.alignItems:item在交叉轴上的对齐方式

    alignItems:flex-start | flex-end | center | stretch

   2.alignSelf:设置item自己在交叉轴上的对齐方式,会覆盖默认的对齐方式

    alignSelf: auto | flex-start | flex-end | center | stretch

     3.flex

    4.flexDirection:定义主轴线的方向

    flexDirection:row | column(default)

   5.flexWrap:是否换行

    flexWrap:wrap | nowrap

  6.justifyContent:item在主轴线的对齐方式

    justifyContent:flex-start | flex-end | center | space-between | space-around

  在线调试弹性布局的网站:https://panw3i.gitee.io/flex/

rn下的弹性布局的更多相关文章

  1. flex弹性布局属性详解!

    详细看下flex弹性布局具体属性: flex容器属性详解:flex-direction:row/column:(横排/竖排) 决定元素的排列方向:flex-wrap:nowrap/wrap/wrap- ...

  2. 百度在PWA中阐述的弹性布局-[CSS]

    原文链接 响应式布局 自从进入移动互联网时代,响应式布局这个词经常出现在 Web 设计和开发领域,它让 Web 页面在不同尺寸的设备上都具有良好的浏览体验. 开始之前 在讲解响应式布局之前,需要先了解 ...

  3. CSS3弹性伸缩布局(下)——flex布局

    新版本 新版本的flex布局模型是2012年9月提出的工作草案,这个草案是由W3C推出的最新语法,这个版本立志于指定标准,让新式的浏览器全面兼容,在未来的浏览器更新换代中实现统一. 目前几乎大部分的浏 ...

  4. 【RN - 基础】之FlexBox弹性布局

    前言 弹性盒模型(The Flexible Box Module),又叫FlexBox,意为“弹性布局”,旨在通过弹性的方式来对齐和分布容器中内容的空间,使其能适应不同的屏幕,为盒装模型提供最大的灵活 ...

  5. ReactNative之参照具体示例来看RN中的FlexBox布局

    今天是重阳节,祝大家节日快乐,今天继续更新RN相关的博客.上篇博客<ReactNative之从HelloWorld中看环境搭建.组件封装.Props及State>中我们通过一个HelloW ...

  6. css3 FlexBox 弹性布局

    Flex 弹性布局 这个是css3中新添加的内容,现在已经支持所有的浏览器,利用Flex布局,可以简便.完整.响应式地实现各种页面布局. 注意:在设置 flex 后,子元素的flaot ,clear, ...

  7. CSS3中的弹性布局——"em"的用法

    使用CSS也好久了,但一直都是在使用“px”来设置Web元素的相关属性,未敢使用“em”.主要原因是,对其并不什么了解,只知道一点概念性的东西,前段时间在项目中要求使用“em”作为单位设置元素,所以从 ...

  8. 淘宝弹性布局方案lib-flexible实践

    2个月前,写过一篇文章<从网易与淘宝的font-size思考前端设计稿与工作流>总结过一些移动web中有关手机适配的一些思路,当时也是因为工作的关系分析了下网易跟淘宝的移动页面,最后才有那 ...

  9. 基于淘宝弹性布局方案lib-flexible的问题研究

    上篇文章<淘宝弹性布局方案lib-flexible实践>结合一个简单的实例,说明了lib-flexible的基本用法,但是lib-flexible的这种适配方式在适配的时候会修改viewp ...

随机推荐

  1. Java中List的sort排序重写

    最近遇到需要使用list中sort排序功能,list中存的是自己写的类,所以需要重写sort函数,一般实现如下: Collections.sort(voList, new Comparator< ...

  2. 远程服务器设置Mysql的操作权限

    mysql -u root -p; root用户输入密码登录mysql服务器 select host, user  from mysql.user; 查询数据库的所有用户以前权限的ip   host: ...

  3. rest_framework_extensions实现缓存

    1.安装包 pip install drf-extensions pip install django-redis pip install django-redis-cache 2.配置redis # ...

  4. linux dd 本地挂载

    losetup /dev/loop0 /root/test.img mkfs.ext4 /dev/loop0 mount /dev/loop0 /data

  5. 安装MCScanX

    1.首先安装依赖软件 the Java SE Development Kit (JDK) and “libpng” 参考路径:https://mp.weixin.qq.com/s?src=11& ...

  6. 《Go程序设计语言》读书笔记-函数

    函数包含连续执行的语句,可以使用代码中通过调用函数来执行他们,函数能够将一个复杂的工作切分成多个更小的模块,使多人写作变得容易.另外,函数对他的使用者隐藏了实现细节.这几方面的特性使得函数成为多数编程 ...

  7. C#使用Spire.Doc Word for .Net读写Word

    以前对Excel或Word文档操作都使用微软的COM组件Microsoft Word 15.0 object library. 但是这种方式必须要求服务器上安装Office,而且会出现读写操作完成后未 ...

  8. CCS 6新建文件自动生成注释

    对于CCS6,可以通过配置,达到新建源文件或者头文件时,自动生成适当的注释: 一.新建源文件自动生成配置. 在某个文件夹下右击选择 New - Source File. 点击 Configure,再选 ...

  9. LVS(一):基本概念和三种模式

    网站架构中,负载均衡技术是实现网站架构伸缩性的主要手段之一.所谓"伸缩性",是指可以不断向集群中添加新的服务器来提升性能.缓解不断增加的并发用户访问压力. 负载均衡有好几种方式:h ...

  10. 阿里云web环境安装

    阿里云web环境一键安装 云盘:链接: https://pan.baidu.com/s/1i4LPwtZ 密码: caph 包含安装包及PDF教程