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>);}
}
感谢作者,原文地址,戳我
转载于:https://www.cnblogs.com/gchlcc/p/7483353.html
React Native - FlexBox弹性盒模型相关推荐
- Flexbox弹性盒模型
Flexbox叫弹性盒模型,它的使用场景主要是屏幕自适应布局和取代浮动布局. 细节性的知识需要大量实践,系统性的知识则需要真正理解系统.我认为Flexbox就属于系统性的知识.所以这篇文章从概念入手, ...
- flexbox 弹性盒模型
轴 justiy-content 主轴位置 align-items 交叉轴位置 align-content 多行数据 交叉轴对齐方式 align-items 的 属性值:stretch 拉伸 (前提 ...
- (转)详解css3弹性盒模型(Flexbox)
今天刚学了css3的弹性盒模型,这是一个可以让你告别浮动.完美实现垂直水平居中的新特性. Flexbox是布局模块,而不是一个简单的属性,它包含父元素和子元素的属性. Flexbox布局的主体思想是似 ...
- 弹性盒模型(flex-box)
弹性盒模型(display:flex) 在我们做移动端项目的时候,弹性盒模型经常会用到,初学者经常会搞不清它的属性.下面主要了解一下弹性盒子的五个属性. 1. flex-direction:指定弹性子 ...
- 弹性盒模型 Flex
1. 什么是弹性盒模型 传统布局基本依靠display float position来完成,有些特殊的布局写起来不太方便. CSS3 弹性盒( Flexible Box 或 flexbox),是一种当 ...
- 【转载】前端笔记之移动端响应式(中)视口百分比布局弹性盒模型remfillpage...
一.viewport视口 1.1什么是屏幕尺寸.屏幕分辨率.屏幕像素密度? 屏幕尺寸:指屏幕的对角线的长度,单位是英寸,常见的屏幕尺寸有3.5.3.7.4.2.4.7.5.0.5.5.6.0等. 屏幕 ...
- CSS3弹性盒模型之box-orient box-direction
Css3引入了新的盒模型--弹性盒模型,其实上一篇文章已经讲到了一个box-flex,今天来讲讲另外的两个弹性盒模型属性box-orient 和 box-direction. 1.box-origen ...
- css3教程:弹性盒模型
Css3引入了新的盒模型--弹性盒模型,该模型决定一个盒子在其他盒子中的分布方式以及如何处理可用的空间.这与XUL(火狐使用的用户交互语言)相似,其它语言也使用相同的盒模型,如XAML .GladeX ...
- CSS3 Flexbox 弹性盒与 css3 阴影效果的演示
CSS3 Flexbox 演示 CSS3 Flexbox 弹性盒与 css3 阴影效果的演示 https://www.html.cn/demo/flexbox-playground/
最新文章
- php post可重复提交了,如何防止 POST 数据重复提交!
- Android--调用内置的浏览器
- python操作excel表格-Python学习—对excel表格的操作
- Win64 驱动内核编程-28.枚举消息钩子
- 汇编解析(4)-BIOS
- .Net中XML,JSON的几种处理方式
- mac下搭建lua环境
- windows7怎么清空电脑只剩系统
- fsmc同步通信设置_微服务模式-同步与异步
- ros 发布信息频率_ROS 消息发布器和订阅器Publisher, Subscriber
- 史上最全的MSSQL复习笔记
- android web canvas,HTML5 - Canvas无法在Android WebView的第一次加载时渲染
- python机器学习案例系列教程——CTR/CVR中的FM、FFM算法
- pandas包安装教程
- arduino点阵声音频谱_参赛-使用Arduino制作32频段音频(音乐)频谱分析仪
- 入门教程pythonpython完整教程视频
- CPAL脚本自动化测试 ———— Signal Wait系列函数及使用
- 专题分纲目录 形式逻辑
- 这次财报,同程艺龙又沾了腾讯的光
- Android 命名规则
热门文章
- FL-EM7688 Smart评估板openwrt开发环境搭建(linux固件部分)
- 实验七:Xen环境下cirrOS的安装配置
- apicloud手机查看效果
- 【转】有的共享软件赚了一百万美元,而为什么你没有?我的软件推广成功之路...
- linux集成开发环境
- Windows Azure Marketplace增加对六种语言和HTML5应用程序的支持
- 设计模式初学者系列-策略模式 -------为什么总是继承
- 支持java虚拟主机_为何缺乏支持Java的虚拟主机
- Ubuntu下软件的安装、卸载方法
- mysql中当前时间九点_MySQL 获得当前日期时间(以及时间的转换)