重点:

  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. sql 判断两条数据库查询语句结果是否有重复

    select 身份证号 from (select 身份证号 from 表1 where 考试名称= 'aaa'union allselect 身份证号 from 表2 where 考试名称= 'bbb ...

  2. nginx 的安装、启动、停止与重启

    一.nginx 基本介绍 1.Nginx 是单进程单线程模型,也就是启动的工作进程只有一个线程响应客户端请求,而 apache 可以在一个进程内启动多个线程响应客户端请求.所以 nginx 的内存占用 ...

  3. PowerDesigner工具将表字段转成java实体

    首先将数据库的表导出为SQL文件.下载安装PowerDesigner工具. 下面以图文的形式讲解: 图   (1) 图   (2) 图   (3) 图   (4) 图   (5) 图   (6) 图 ...

  4. Intellij IDEA 中如何查看maven项目中所有jar包的依赖关系图(转载)

    Intellij IDEA 中如何查看maven项目中所有jar包的依赖关系图 2017年04月05日 10:53:13 李学凯 阅读数:104997更多 所属专栏: Intellij Idea   ...

  5. [Tools] Wireshark Primer Tutorials

    介绍就不说了,安装也没必要讲,关于如何使用,网上的辣鸡文过多,视频又太冗余. 我推荐看下面有条理的入门教程. 界面说明:http://openmaniak.com/cn/wireshark_use.p ...

  6. java 调用webservice接口wsdl,推荐使用wsdl2java,放弃wsimport

    网上说wsimport是jdk1.6后自带的客户端生成调用webservice接口的工具,其实我挺喜欢原生的东西,毕竟自家的东西用着应该最顺手啊,但往往让人惊艳的是那些集成工具. 本机jdk1.8.1 ...

  7. 源码解析之ConcurrentHashmap

    ConcurrentHashmap算是我看的集合源码里最难理解的了(当然ConcurrentLinkedList虽然代码少但理解起来也累),在Java1.8版本中DougLea大师巧通过妙地代码把锁粒 ...

  8. com.android.support:design

    Error:Could not find com.android.support:design:27.3.1.Required by: project :app Please install the ...

  9. Excel VBA ——如何导出数据到excel表格

    sub OutPut() Dim FileTitle, MyPath, MyFullName As String Application.ScreenUpdating = false '关闭表格公式的 ...

  10. Linux 进程同步和通信

    为了同步进程所以需要进程通信 管道(有名:文件形式存在,无名:仅限于父子进程间通信) 消息队列 信号量 共享存储 套接字(可用于不同机器)