【RN - 基础】之FlexBox弹性布局
2017-02-25 10:21
295 查看
前言
弹性盒模型(The Flexible Box Module),又叫FlexBox,意为“弹性布局”,旨在通过弹性的方式来对齐和分布容器中内容的空间,使其能适应不同的屏幕,为盒装模型提供最大的灵活性。FlexBox在大部分情况下都是处理Item在Container中位置和尺寸的关系。
FlexBox在布局中能解决很多问题,如浮动布局、屏幕适配、水平垂直居中、自动分配宽度等。
FlexBox布局属性
flexDirection主轴方向:
flexDirection属性用来设置主轴的方向,即视图中子控件的排列顺序,有如下几种选项:column(默认值):子控件从上向下排列;
column-reverse:子控件从下向上排列;
row:子控件从左向右排列;
row-reverse:子控件从右向左排列。
justifyContent对齐方式:
justifyContent属性用来设置伸缩项在主轴线的对齐方式,有如下几种选项:flex-start(默认值):向主轴方向的起始端靠齐;
flex-end:向主轴方向的结尾端靠齐;
center:向主轴中间靠齐;
space-between:两段靠齐,项之间间隔相等,主轴两段没有空隙;
space-around:项平均的分布在主轴上,每个项的两段都有空隙。
alignItems侧轴对齐方式:
alignItems属性用来设置伸缩项在侧轴上的对齐方式(侧轴永远垂直于主轴),有如下几种选项:stretch(默认值):如果没有设置项的高度或设置为auto,则项将占满侧轴;
flex-start:向侧轴方向的起始端靠齐;
flex-end:向侧轴方向的末尾端靠齐;
center:向侧轴的中间靠齐。
flexWrap流式布局样式:
flexWrap属性用来设置流式布局(当所有项不能显示在一行中时,换行显示)的样式,有如下几种选项:nowrap(默认值):不换行;
wrap:换行,新行在旧行下方;
wrap-reverse:换行,新行在旧行上方。
注意:flexWrap属性在iOS上可以正常设置,但在Android上如果不加额外的设置,则只会显示第一行,解决方法是添加style:alignItems: ’flex-start’
FlexBox元素属性
flex元素比重:
flex属性是flex-grow、flex-shrink和flex-basis三个属性的组合体,其中后两个属性是可选属性。三个属性具体解释如下:flex-grow:元素占当前容器中的弹性宽度的比重,默认是0;
flex-shrink:缩小元素的宽度,值越大缩的越小,默认值是1;
flex-bisis:相当于CSS中的width属性,默认值是auto。
元素在容器中的宽度/高度的计算公式:宽/高度 = 弹性宽度 * (flow-grow / sum(flow-grow));
alignSelf:
alignSelf属性允许单个元素有与其他元素不一样的对齐方式,有如下几种选项:auto(默认值):集成父容器的对齐方式,如果没有父容器,则相当于stretch;
flex-start:当前元素向父容器的起始端靠齐;
flex-end:当前元素向父容器的结尾端靠齐;
center:当前元素向父容器的中间靠齐;
stretch:当前元素拉伸铺满父容器。
注意:alignSelf属性相当于将父容器的alignItems属性进行了覆盖。
FlexBox其他方法
获取当前屏幕的宽度(高度、分辨率使用同样方法获取):
let Dimensions = require('Dimensions'); let width = Dimensions.get('window').width;
获取当前屏幕的宽度、高度、分辨率:
let Dimensions = require('Dimensions'); let {width, height, scale} = Dimensions.get('window');
补充参考
【Flex布局教程 - 语法篇】【Flex布局教程 - 实例篇】
相关文章推荐
- React Native系列之flexbox布局(RN基础)
- React Native实战之flexbox布局(RN基础)
- flex-box弹性布局的用法以及兼容性
- 弹性布局 display:box(相对等分) 和 display:flex(绝对等分)
- flex-box弹性布局
- 弹性布局FlexBox
- Android之FlexboxLayout弹性布局的介绍
- 《React-Native系列》11、 图解RN布局之FlexBox,三分钟上手写RN界面
- ReactNative (四)FlexBox 布局基础
- css3盒子布局-定义盒子的弹性空间(box-flex)
- FlexboxLayout-----Android弹性布局
- 安卓开发进阶之弹性布局FlexboxLayout--Part2(翻译)
- 【Android 基础】Google新推出的Android布局控件FlexboxLayout
- css3中 弹性盒模型布局之box-flex
- 【基础知识】Flex-弹性布局原来如此简单!!
- FlexboxLayout——Android弹性布局
- CSS3支持box-flex弹性布局
- React Native 弹性布局FlexBox
- CSS3--弹性布局flexbox
- 移动Web开发基础-flex弹性布局(兼容写法)