React Native布局详解
Flexbox 布局
Flex有两个属性:Container 和 Item
flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。采用flex布局的元素,称为flex容器(flex container),简称"容器"。它的所有子元素自动成为容器成员,称为flex项目(flex item),简称"项目"。
容器属性
简述:
- flexDirection(决定容器内所有子元素item的排列方向(即主轴方向),如row子元素横排,column子元素竖排)
- justifyContent(定义了子元素Item在主轴方向上的排列方式,如center就居中,flex-start就是左端为开头)
- alignItems(子元素沿竖直轴的排列方式,flex-start就靠上,center就放中间线)
- flexWrap(定义是否换行,nowrap就不换行,wrap就换行)
常用:
1、flexDirection : 用来决定容器内所有子元素Item的排列方向,默认是竖直轴方向,即两个View竖直排列
(想让子元素横向并列就用flexDirection:'row')
.box {
flex-direction: row | row-reverse | column | column-reverse;
}

2、justifyContent:定义了子元素Item在主轴方向上的排列方式
.box {
justify-content: flex-start | flex-end | center | space-between | space-around;
}

3、alignItems子元素沿竖直轴的排列方式
.box {
align-items: flex-start | flex-end | center | baseline | stretch;
}

不常用:
1、flexWrap默认容器中的子元素Item都排列在一条轴线上,flexWrap属性定义了如果在一条轴线上排列不下所有的Item元素,可以进行换行排列
.box{
flex-wrap: nowrap | wrap | wrap-reverse;
}
nowrap(默认值):不换行

wrap:换行,且第一行在上方

wrap-reverse:换行,第一行在下方

元素属性:
1、flex 布局权重
1:0:flex=0的项目占用空间仅为内容所需空间,flex=1的项目会占据其余所有空间
在部分组件指定了height的情况下,flex是“除了height以外剩余空间”的分布比例。例如:
<View style={{height:100}}>
<View style={{flex: 3}} />
<View style={{flex: 2}} />
</View>
两个子View的高度分别是 60和40。宽度同理
Flex计算规则详见:https://blog.csdn.net/u010377383/article/details/79661859
2、alignSelf
项目交叉轴方向自身对齐方式
从项目经验总结的常用方法:
1、设置border边线的方法
borderRightWidth: 0,
borderLeftWidth: 0,
borderTopWidth: 0,
borderBottomWidth: 1,
borderBottomColor:'#f5f5f5',
2、通过flex布局将一个图标移到最右端的常用方法
图标外层嵌套一个View,View的style如下:
imgRightStyle:{
flex:1,
flexDirection:'row',
justifyContent: 'flex-end',
alignItems: 'center',
},
解释下:flex将剩余空间占满,flexDirection使得View主轴为横向轴,justifyContent使得row的起始端为右端,alignItem将图标上下居中。
参考:
https://www.jianshu.com/p/4a61a517c792
https://blog.csdn.net/codetomylaw/article/details/52190636
React Native布局详解的更多相关文章
- Android开发重点难点1:RelativeLayout(相对布局)详解
前言 啦啦啦~博主又推出了一个新的系列啦~ 之前的Android开发系列主要以完成实验的过程为主,经常会综合许多知识来写,所以难免会有知识点的交杂,给人一种混乱的感觉. 所以博主推出“重点难点”系列, ...
- 【翻译】Anatomy of a Program in Memory—剖析内存中的一个程序(进程的虚拟存储器映像布局详解)
[翻译]Anatomy of a Program in Memory—剖析内存中的一个程序(进程的虚拟存储器映像布局详解) . . .
- Android布局详解之一:FrameLayout
原创文章,如有转载,请注明出处:http://blog.csdn.net/yihui823/article/details/6702273 FrameLayout是最简单的布局了.所有放在布局里的 ...
- Android 布局详解
Android 布局详解 1.重用布局 当一个布局文件被多处使用时,最好<include>标签来重用布局. 例如:workspace_screen.xml的布局文件,在另一个布局文件中被重 ...
- DevExpress控件GridControl中的布局详解 【转】
DevExpress控件GridControl中的布局详解 [转] 2012-10-24 13:27:28| 分类: devexpress | 标签:devexpress |举报|字号 订阅 ...
- Android 布局学习之——Layout(布局)详解二(常见布局和布局参数)
[Android布局学习系列] 1.Android 布局学习之——Layout(布局)详解一 2.Android 布局学习之——Layout(布局)详解二(常见布局和布局参数) 3.And ...
- 【转载】图说C++对象模型:对象内存布局详解
原文: 图说C++对象模型:对象内存布局详解 正文 回到顶部 0.前言 文章较长,而且内容相对来说比较枯燥,希望对C++对象的内存布局.虚表指针.虚基类指针等有深入了解的朋友可以慢慢看.本文的结论都在 ...
- 弹性盒布局详解(display: flex;)
弹性盒布局详解 弹性盒介绍 弹性盒的CSS属性 开启弹性盒 弹性容器的CSS属性 flex-direction设置弹性元素在弹性容器中的排列方向 主轴与侧轴(副轴) flex-wrap设置弹性容器空间 ...
- Grid 网格布局详解
Grid网格布局详解: Grid布局与Flex布局有着一定的相似性,Grid布局是将容器划分成行和列,产生单元格,可以看做是二维布局. 基本概念: 采用网格布局的区域,称为"容器" ...
随机推荐
- hadoop中hive的属性
1.在hive中是可以删除文件的: hive> dfs -rm -R /u2.txt > ; Deleted /u2.txt 2.hive 中的default数据库 <propert ...
- 【2】Git仓库
一.获取 Git 仓库 初始化仓库 ##基于当前目录初始化仓库 $ git init ##指定demo目录初始化仓库 $ git init demo 克隆现有仓库 ##克隆现有的仓库,默认目录名:li ...
- C 动态内存申请
例子: int *p=0; int number=0; scanf("%d",&number); p = (int*)malloc(number*sizeof(int));
- IDEA常见问题和设置
1.查看方法的文档:快捷键 Ctrl-Q(Ctrl-J(mac)) 2.历史记录 3.IDEA控制台输出中文乱码问题 4.修改Idea默认的maven等全局设置 5.idea 启动时报错javax.i ...
- JDK的收费问题
关于JDK是否收费,我也有过疑问,查了一些资料,就在这里做一个简要的说明. 首先要明白JDK的发布模型.两年多以前,2017年9月21日,伴随着JDK9的发布,JDK就开启了新的发布模式(如下图所示) ...
- windows安装mysql(5.7.26版本)压缩包
1.解压安装包,进入文件夹,并创建一个data文件夹! 2.修改 my-default.ini 文件 [mysql] default-character-set=utf8 [mysqld] port ...
- CSS基础学习 18.CSS多列
四种常见的浏览器内核:
- free命令详解-1
free命令可以显示Linux系统中空闲的.已用的物理内存及swap内存以及被内核使用的buffer.我们本篇学习如何使用free命令监控系统的内存情况. 一般使用free –m方式查看内存占用情况( ...
- Unity 连接WebSocket(ws://)服务器
Unity 连接ws,不用任何插件,忙活了一天终于搞定了,一直连接不上,原来是没有添加header, 代码比较简单,直接贴出来普度众生 using System; using System.Net.W ...
- Java8-Stream-No.04
import java.util.OptionalInt; import java.util.stream.IntStream; public class Streams4 { public stat ...