React Native - FlexBox弹性盒模型
FlexBox布局
1. 什么是FlexBox布局?
弹性盒模型(The Flexible Box Module),又叫FlexBox,意为"弹性布局",旨在通过弹性的方式来对齐和分布容器中内容的空间,使其能适应不同屏幕,为盒模型提供最大的灵活性.
Flex布局主要思想是: 让容器有能力让其子项目能够改变其宽度,高度(甚至是顺序), 以最佳方式填充可用空间;
React Native中的FlexBox是这个规范的子集.
2. FlexBox在开发中的应用场景
2.1 FlexBox在布局中能够解决什么问题?
- 浮动布局
- 各种机型屏幕适配
- 水平和垂直居中
- 自动分配宽度
- ... ...
2.2 在CSS中,常规的布局是基于块和内联流方向,而Flex布局是基于flex-flow流,稀土很好解释了Flex布局的思想:
容器默认存在两根轴: 水平的主轴(main axis) 和 垂直的主轴(cross axis).主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end; 交叉轴的开始位置叫做cross start, 结束位置叫做cross end.
项目默认沿主轴排列,单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size.
2.3 根据伸缩项目排列方式的不同,主轴和测轴方向也有所变化:
3. FlexBox的常用属性
3.1 容器属性
- flexDirection:
row | row-reverse | column | column-reverse- 该属性决定主轴的方向(即项目的排列方向).
- row : 主轴为水平方向,起点在左端
- row-reverse : 主轴为垂直方向,起点在右端.
- column(默认值) : 主轴为垂直方向,起点在上沿.
- column-reverse : 主轴为垂直方向,起点在下沿.
- justifyContent: flex-start | flex-end | center | space-between | space-around
- 定义了伸缩项目在主轴线的对齐方式
- flex-start(默认值): 伸缩项目向一行的起始位置靠齐.
- flex-end: 伸缩项目向一行的结束位置靠齐.
- center: 伸缩项目向一行的中间位置靠齐.
- space-between: 两端对齐,项目之间的间隔都相等.
- space-around: 伸缩项目会平均的分布在行里,两端保留一半的空间.
- alignItems: flex-start | flex-end | center | baseline | stretch
- 定义项目在交叉轴上如何对齐, 可以把其想象成侧轴(垂直于主轴)的"对齐方式"
- flex-start: 交叉轴的起点对齐
- flex-end: 交叉轴的终点对齐
- center: 交叉轴的重点对齐
- baseline: 项目的第一行文字的基线对齐
- stretch(默认值): 如果项目未设置高度或设为auto,将占满整个容器的高度
flexWrap: nowrap | wrap | wrap-reverse
默认情况下,项目都排在一条线(又称"轴线")上. flex-wrap属性定义,如果一条轴线排不下,如何换行.
nowrap(默认值): 不换行
wrap: 换行, 第一行在上方.
wrap-reverse: 换行,第一行在下方. (和wrap相反)
3.2 元素属性
flex
- "flex-grow", "flex-shrink" 和 "flex-basis"三个属性的缩写, 其中第二个和第三个参数("flex-shrink" 和 "flex-basis")是可选参数.
- 默认值为"0 1 auto".
- 宽度 = 弹性宽度 * ( flexGrow / sum( flexGorw ) )
alignSelf: "auto | flex-start | flex-end | center | baseline | stretch"
- align-self属性允许单个项目有与其他项目不一样的对齐方式, 可覆盖align-item属性. 默认值为auto, 表示继承父元素的align-items属性,如果没有父元素, 则等同于stretch.
- align-self属性允许单个项目有与其他项目不一样的对齐方式, 可覆盖align-item属性. 默认值为auto, 表示继承父元素的align-items属性,如果没有父元素, 则等同于stretch.
4. 在React Native中使用Flexbox
4.1 获取当前屏幕的宽度,高度,分辨率
var Dimensions = require('Dimensions');
export default class myApp extends Component {
render() {
return (
<View style={styles.container}>
<View style={styles.innerView1}></View>
<View style={styles.innerView2}></View>
<View style={styles.innerView3}></View>
<Text>屏幕宽度是{Dimensions.get('window').width}</Text>
<Text>屏幕高度是{Dimensions.get('window').height}</Text>
<Text>屏幕分辨率是{Dimensions.get('window').scale}</Text>
</View>
);
}
}
React Native - FlexBox弹性盒模型的更多相关文章
- flexbox弹性盒模型
div { display:flex; } div a{ }
- 【css】弹性盒模型
弹性盒模型flexBox 弹性盒模型是c3的一种新的布局模式 它是指一种当页面需要适应不同屏幕大小以及设备类型时,确保元素有恰当行为的布局方式. 引入弹性盒模型布局的目的是提供一种更有效的方法来对一个 ...
- (转)详解css3弹性盒模型(Flexbox)
今天刚学了css3的弹性盒模型,这是一个可以让你告别浮动.完美实现垂直水平居中的新特性. Flexbox是布局模块,而不是一个简单的属性,它包含父元素和子元素的属性. Flexbox布局的主体思想是似 ...
- flexbox-CSS3弹性盒模型flexbox完整版教程
原文链接:http://caibaojian.com/flexbox-guide.html flexbox-CSS3弹性盒模型flexbox完整版教程 A-A+ 前端博客•2014-05-08•前端开 ...
- CSS3弹性盒模型flexbox布局基础版
原文链接:http://caibaojian.com/using-flexbox.html 最近看了社区上的一些关于flexbox的很多文章,感觉都没有我这篇文章实在,最重要的兼容性问题好多人都没有提 ...
- CSS3弹性盒模型flexbox完整版教程
http://caibaojian.com/flexbox-guide.html 来自CSS Tricks上的一个教程,原文为:A Complete Guide to Flexbox.文中详细的介绍了 ...
- css3弹性盒模型(Flexbox)
Flexbox是布局模块,而不是一个简单的属性,它包含父元素和子元素的属性. Flexbox布局的主体思想是似的元素可以改变大小以适应可用空间,当可用空间变大,Flex元素将伸展大小以填充可用空间,当 ...
- 详解css3弹性盒模型(Flexbox)
目前没有浏览器支持 box-flex 属性. Firefox 支持替代的 -moz-box-flex 属性. Safari.Opera 以及 Chrome 支持替代的 -webkit-box-flex ...
- Flexbox(弹性盒模型)完全指南
Flexbox(弹性盒模型)布局完全指南 Github:sueRimn 来源:A guide to Flexbox 这个指南讲诉了flexbox的所有内容,重点介绍了父元素(flex容器)和子元素(f ...
随机推荐
- 华为机型cordova-plugin-image-picker读取图库闪退
在测试cordova开发的安卓APP过程中,使用$cordovaImagePicker.getPictures(options)获取相册照片时,华为机型总是会闪退. config.xml已经添加了权限 ...
- Cocos2d-X开发教程-捕鱼达人 Cocos2-x development tutorial - fishing talent
Cocos2d-X开发教程-捕鱼达人 Cocos2-x development tutorial - fishing talent 作者:韩梦飞沙 Author:han_meng_fei_sha 邮箱 ...
- BZOJ.2095.[POI2010]Bridges(最大流ISAP 二分 欧拉回路)
题目链接 最小化最大的一条边,二分答案.然后就变成了给一张无向图定向使其为欧拉回路 二分答案后对于一个位置的两条边可能都保留,即双向边,需要给它定向:可能只保留小的一条,即单向边,不需考虑 如何给它定 ...
- 潭州课堂25班:Ph201805201 爬虫基础 第四课 Requests (课堂笔记)
优雅到骨子里的Requests 1528811134432 简介 上一篇文章介绍了Python的网络请求库urllib和urllib3的使用方法,那么,作为同样是网络请求库的Request ...
- 20172302 《Java软件结构与数据结构》第五周学习总结
2018年学习总结博客总目录:第一周 第二周 第三周 第四周 第五周 教材学习内容总结 查找 查找即在某项目组中寻找某一指定目标元素,或确定该组中并不存在此元素.对其进行查找的项目组称为查找池. 1. ...
- php 日期和时间
php date() 函数把时间戳格式化为更易读取的日期和时间 语法: date(formet,timestamp); 参数 描述 format 必需.规定时间戳的格式. timestamp 可选.规 ...
- Hadoop学习博客
http://zy19982004.iteye.com/blog/monthblog_more
- phantomjs + python 打造一个微信机器人
phantomjs + python 打造一个微信机器人 1.前奏 媳妇公司不能上网,但经常需要在公众号上找一些文章做一些参考,需要的时候就把文章链接分享给我,然后我在浏览器打开网页,一点点复制过 ...
- spring和springMVC的面试问题总结
1.Spring中AOP的应用场景.Aop原理.好处? 答:AOP--Aspect Oriented Programming面向切面编程:用来封装横切关注点,具体可以在下面的场景中使用: Authen ...
- WTL中最简单的实现窗口拖动的方法(转)
目前,很多基于对话框的应用程序中对话框都是不带框架的,也就是说对话框没有标题栏.众所周知,窗口的移动都是通过鼠标拖动窗口的标题栏来实现的,那么现在应用程序中的对话框没有了标题栏,用户如何移动对话框呢? ...