FlexBox布局
概述
FlexBox(弹性框布局):英文全称the flexible box Module,FlexBox旨在提供了在不同尺寸设备上都能保持一致的布局方式。 其主要思想是:让容器有能力让其子项目能够改变其宽度|高度|顺序,以最佳方式填充可用空间。在布局中,首先得确定主轴方向(flexDirection),主轴组件的对齐方式(justifyContent),侧轴组件的对齐方式(alignItems),通过以上四点可以基本确定布局。 注:FlexBox是CSS3弹性框布局规范,目前还处于最终征求意见稿 (Last Call Working Draft)阶段,并不是所有的浏览器都支持Flexbox。
在学习FlexBox之前首先要清楚一个概念“宽和高”。一个组件的高度和宽度决定了它在屏幕上的尺寸,显示的效果。
FlexBox属性
为了更好的理解与应用FlexBox,我们先看一下FlexBox所具有的属性。
主轴和侧轴(横轴和竖轴)
在学习属性之前,让我们先了解一个概念:主轴和侧轴。
如图:主轴即水平方向的轴线,可以理解成横轴,侧轴垂直于主轴,可以理解为竖轴。
flexDirection 该属性确定了主轴方向。
属性名 |
说明 |
---|---|
row(默认) |
主轴方向为水平,起点在左端 |
row- reverse |
主轴方向为水平,起点在右端 |
column |
主轴方向为垂直,起点在上端 |
column-reverse |
主轴方向为垂直,起点在下端 |
justifyContent 该属性确定了组件在主轴方向上的对齐方式。
属性名 |
说明 |
---|---|
flex-start(默认) |
组件沿着主轴方向的起始位置靠齐 |
flex-end |
组件沿着主轴方向的结束位置靠齐,和flex-start相反 |
space-between |
组件在主轴方向上两端对齐,其中的间隔相等 |
space-around |
组件会平均分配在主轴方向上,两端保留一定的位置空间 |
alignItems 该属性确定了组件在侧轴方向上的对齐方式。
属性名 |
说明 |
---|---|
flex-start |
组件沿着侧轴上的起点对齐 |
flex-end |
组件沿着侧轴上的终点对齐 |
center |
组价在侧轴方向上居中对齐 |
stretch(默认) |
组件在侧轴方向上占满 |
flexWrap 该属性主要用作换行,默认情况下,项目都排列在一条线上,放不下的部分则不放置,flexWap就是定义是否换行的。。
属性名 |
说明 |
---|---|
nowrap(默认) |
不换行 |
wrap |
换行,第一行在上方 |
wrap-reverse |
换行,第一行在下方 |
代码示例
<View style={ {flexDirection:'row-reverse',backgroundColor:"darkgray",marginTop:20}}>
<View style={ {width:40,height:40,backgroundColor:"darkcyan",margin:5}}>
<Text style={ {fontSize:16}}>1</Text>
</View>
<View style={ {width:40,height:40,backgroundColor:"darkcyan",margin:5}}>
<Text style={ {fontSize:16}}>2</Text>
</View>
<View style={ {width:40,height:40,backgroundColor:"darkcyan",margin:5}}>
<Text style={ {fontSize:16}}>3</Text>
</View>
<View style={ {width:40,height:40,backgroundColor:"darkcyan",margin:5}}>
<Text style={ {fontSize:16}}>4</Text>
</View>
</View>
宽和高
在React Native中尺寸是没有单位的,它代表了设备独立像素。有点类似于Android的设备像素。 如:
<View style={ {width:100,height:100,margin:40,backgroundColor:'gray'}}>
<Text style={ {fontSize:16,margin:20}}>尺寸</Text>
</View>
上诉代码:运行在Android上时,View的长和宽被解释成:100dp 100dp单位是dp,字体被解释成16sp 单位是sp,运行在iOS上时尺寸单位被解释称了pt,这些单位确保了布局在任何不同dpi的手机屏幕上显示不会发生改变。
RN的FlexBox和css的FlexBox的异同
虽然React Native中的FlexBox 和Web CSSS上FlexBox工作方式是一样的。但是在某些方面还是有细微区别的:
- flexDirection: React Native中默认为flexDirection:’column’,在Web CSS中默认为flex-direction:’row’
- alignItems: React Native中默认为alignItems:’stretch’,在Web CSS中默认align-items:’flex-start’
- flex: React Native中flex只接受一个参数,而Web Css的flex可以接受多参数,如:flex: 2 2 10%
- RN不支持属性:align-content,flex-basis,order,flex-basis,flex-flow,flex-grow,flex-shrink
React Native
React Native布局属性
以下属性是React Native所支持的Flex属性。
父视图属性(容器属性):
- flexDirection enum(‘row’, ‘column’,’row-reverse’,’column-reverse’)
- flexWrap enum(‘wrap’, ‘nowrap’)
- justifyContent enum(‘flex-start’, ‘flex-end’, ‘center’, ‘space-between’, ‘space-around’)
- alignItems enum(‘flex-start’, ‘flex-end’, ‘center’, ‘stretch’)
justifyContent
该属性定义了浏览器如何分配顺着父容器主轴的弹性(flex)元素之间及其周围的空间,默认为flex-start。
属性名 |
说明 |
---|---|
flex-start(默认) |
从行首开始排列。每行第一个弹性元素与行首对齐,同时所有后续的弹性元素与前一个对齐 |
flex-end |
从行尾开始排列。每行最后一个弹性元素与行尾对齐,其他元素将与后一个对齐。 |
center |
伸缩元素向每行中点排列。每行第一个元素到行首的距离将与每行最后一个元素到行尾的距离相同。 |
space-between |
在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素与行首对齐,每行最后一个元素与行尾对齐。 |
space-around |
在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素到行首的距离和每行最后一个元素到行尾的距离将会是相邻元素之间距离的一半。 |
代码示例:
<View style={ {justifyContent:'center',flexDirection:'row',backgroundColor:"darkgray",marginTop:20}}>
···
</View>
alignItems
属性以与justify-content相同的方式在侧轴方向上将当前行上的弹性元素对齐,默认为stretch。 属性请参照本文开头的讲解。 代码示例:
<View style={ {justifyContent:'center',flexDirection:'row',backgroundColor:"darkgray",marginTop:20}}>
···
</View>
子视图属性
alignSelf
该属性以属性定义了flex容器内被选中项目的对齐方式。注意:alignSelf 属性可重写灵活容器的 alignItems 属性。
属性名 |
说明 |
---|---|
auto(默认) |
元素继承了它的父容器的 align-items 属性。如果没有父容器则为 “stretch” |
stretch |
元素被拉伸以适应容器 |
center |
元素位于容器的中心 |
flex-start |
元素位于容器的开头 |
flex-end |
元素位于容器的结尾 |
代码示例:
<View style={ {alignSelf:'baseline',width:60,height: 20,backgroundColor:"darkcyan",margin:5}}>
<Text style={ {fontSize:16}}>1</Text>
</View>
flex
该属性定义了一个可伸缩元素的能力,默认为0。类似于比重这么一个概念(因其位于父视图下面,所以比重相当于所占的百分比)。
代码示例:
<View style={ {flexDirection:'row',height:40, backgroundColor:"darkgray",marginTop:20}}>
<View style={ {flex:1,backgroundColor:"darkcyan",margin:5}}>
<Text style={ {fontSize:16}}>flex:1</Text>
</View>
<View style={ {flex:2,backgroundColor:"darkcyan",margin:5}}>
<Text style={ {fontSize:16}}>flex:2</Text>
</View>
<View style={ {flex:3,backgroundColor:"darkcyan",margin:5}}>
<Text style={ {fontSize:16}}>flex:3</Text>
</View>
</View>
其他属性
视图边框
属性名 |
说明 |
---|---|
borderBottomWidth |
底部边框宽度 |
borderLeftWidth |
左边框宽度 |
borderRightWidth |
右边框宽度 |
borderTopWidth |
顶部边框宽度 |
borderWidth |
边框宽度 |
border(Bottom|Left|Right|Top)Color |
边框颜色 |
外边框
属性名 |
说明 |
---|---|
margin |
外边距 |
marginBottom |
下外边距 |
marginHorizontal |
左右外边距 |
marginLeft |
左外边距 |
marginRight |
右外边距 |
marginTop |
上外边距 |
marginVertical |
上下外边距 |
内边框
属性名 |
说明 |
---|---|
padding |
内边距 |
paddingBottom |
下内边距 |
paddingHorizontal |
左右内边距 |
paddingLeft |
左内边距 |
paddingRight |
右内边距 |
paddingTop |
上内边距 |
paddingVertical |
上下内边距 |
边缘
属性名 |
说明 |
---|---|
left |
元素的左边缘 |
right |
元素的右边缘 |
top |
元素的上边缘 |
bottom |
元素的下边缘 |
元素定位
属性名 |
说明 |
---|---|
absolute |
生成绝对定位的元素,元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定 |
relative |
生成相对定位的元素,相对于其正常位置进行定位 |
- xml-rpc(1)-first demo
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(55)-工作流设计-表单布局
- 网站源文件被注入了iframe代码—ARP欺骗的木马病毒攻击
- ASP.NET MVC5+EF6+EasyUI 后台管理系统--工作流演示截图
- 基于CPPN与GAN+VAE生成高分辨率图像
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(54)-工作流设计-所有流程监控
- (收藏)搭建.NET Framework 3.0开发环境 及SharePoint 2007/WSS 3环境
- WCF技术剖析之八:ClientBase<T>中对ChannelFactory<T>的缓存机制
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(48)-工作流设计-起草新申请
- 把windows2003“搬”到手机上。
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(53)-工作流设计-我的批阅
- ASP.NET MVC5+EF6+EasyUI 后台管理系统--任务调度系统解析
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(52)-美化EasyUI皮肤和图标
- ASP.NET MVC5+EF6+EasyUI 后台管理系统--系统权限全套完整图
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Kafka的安装与配置
- PyQt5 技术篇-如何彻底删除控件?布局移除控件方法。
- PyQt5 技术篇-设置滚动条拉动位置,scrollArea滚动条位置设置方法。
- CentOS8更换yum源后出现同步仓库缓存失败的问题
- log4j配置方式
- 基于MHA搭建MySQL Replication集群高可用架构
- PyQt5 技巧篇-解决相对路径无法加载图片问题,styleSheet通过"相对"路径加载图片,python获取当前运行文件的绝对路径。
- 基于MMM搭建MySQL Replication集群高可用架构
- Python 技术篇-按任意格式灵活获取日期、时间、年月日、时分秒。日期格式化。
- 当删库时如何避免跑路
- Python 句法错误:"SyntaxError: invalid character in identifier",原因及解决方法
- Python3 多线程问题:ModuleNotFoundError: No module named 'thread',原因及解决办法。
- 文件传输和秒传
- 关于数据库的各种备份与还原姿势详解
- Python 技术篇-多线程的2种创建方法,多线程的简单用法,快速上手。