1.0.6 • Published 8 years ago
flexlayout v1.0.6
使用说明
1、通过如下命令将FlexLayout下载到本地 首先需要学会使用React框架和Webpack,不会的请点击这里,10分钟学会webpack配置
npm install --save-dev flexlayout
2、导入FlexLayout到你想要使用的js/jsx文件
import FlexLayout from 'flexlayout';
或者也可以这样写
var FlexLayout =require('flexlayout');
3、开始使用FlexLayout标签,所有flex属性都需要写入到style属性中,就像原生的使用普通标签一样。 注意:不支持将flex属性写入到class中,同时不需要设置style的display属性为flex,FlexLayout不支持复合属性,如flex,也不支持order,如想实现order效果,请自己调整子标签的顺序即可,或者通过js控制,以后有时间会进一步支持;如果FlexLayout的子标签是自定义标签,请保证自定义元素的style属性能够被内部HTML元素所继承
<FlexLayout style={{width:"100%",height:"auto",flexDirection:"row",flexWrap:"nowrap",justifyContent:"center",alignItems:"flex-start"}}>
<div style={{alignSelf:"flex-start"}}></div>
<div style={{flexShrink:1}}></div>
</FlexLayout>
属性:
type 参数类型:string, 参数释义:FlexLayout默认采用的标签类型 默认值:div, 举例:span、a、div等 flexMode 参数类型:枚举,只能是auto/flex/compat, 参数释义:当前使用的flex模式, auto-自动根据浏览器支持性来判断,确定是否需要用原生flex支持还是用js polyfill; flex-强制用原生浏览器支持,这样会导致不支持flex的浏览器没有任何flex效果。 compat-强制用js实现flex效果,会忽略原生的flex引擎渲染,如果你想屏蔽浏览器之间实现flex的差异,可以用这个模式,但是该模式会降低浏览器的性能 默认值:auto, 举例:auto/flex/compat style 参数类型:object, 参数释义:style属性,必须把flex属性值写到这里 默认值:{width:'100%',height:'auto',flexDirection:'row',flexWrap:'nowrap',justifyContent:'flex-start',alignItems:'stretch',alignContent:'flex-start'}, 举例:无 style(子组件的style) 参数类型:object, 参数释义:这个是child 的style属性,必须把child的flex属性值写到这里面 默认值:{flexGrow:0,flexShrink:1,flexBasis:'auto',alignSelf:'auto'} 举例:无
更多信息,请进入http://www.pofod.com 有问题,请在github的issues提出