《React-Native系列》11、 图解RN布局之FlexBox,三分钟上手写RN界面
来源:互联网 发布:宋哲宗赵煦 知乎 编辑:程序博客网 时间:2024/05/16 18:15
前面其实已经写过很多RN界面了,今天再来回顾下FlexBox布局,主要是记录笔记,必备日后查阅。
综述
flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。采用flex布局的元素,称为flex容器(flex container),简称"容器"。它的所有子元素自动成为容器成员,称为flex项目(flex item),简称"项目"。
flexDirection
布局方向,决定主轴的方向,默认值是column,即纵向布局
|值 |描述 |
|----------- --|--------------------|
|row |横向布局,主轴为水平方向|
|column |纵向布局,主轴为竖直方向|
flexWrap
包含内容,默认值是nowrap,不包裹所有内容,其实可以理解为是否换行。
|值 |描述 |
|-----------|--------------------------------------------------------|
|nowrap |项目沿主轴方向布局,超出容器长度的部分不可见 |
|wrap |项目沿主轴布局所需长度大于容器总长度时,分行布局,所有项目内容都可见|
alignItems
交叉轴方向对齐方式,默认值flex-start,即交叉轴开端。
|值 | 描述 |
|-------------|----------|
|flex-start | 交叉轴开端 |
|center | 交叉轴居中 |
|flex-end | 交叉轴末端 |
justifyContent
主轴方向对齐方式,默认值是flex-start,即主轴的开端
|值 | 描述 |
|------------------|-----------------------|
|flex-start | 主轴开端 |
|center | 居中 |
|flex-end | 主轴末端 |
|space-between| 项目与项目之间插入相等空隙 |
|space-around | 项目两旁插入相等空隙 |
flex
布局权重
|值 |描述 |
|------|----------|
|>=0 |项目占位权重|
1:0:flex=0的项目占用空间仅为内容所需空间,flex=1的项目会占据其余所有空间
在部分组件指定了height的情况下,flex是“除了height以外剩余空间”的分布比例。例如:
<View style={{height:100}}> <View style={{flex: 3}} /> <View style={{flex: 2}} /></View>两个子View的高度分别是 60和40。
<View style={{height:100}}> <View style={{height: 50, flex: 3}} /> <View style={{flex: 2}} /></View>两个子View的高度就分别是80(50+30)和20。
alignSelf
项目交叉轴方向自身对齐方式
|值 |描述|
|-------------|---|
|flex-start |开端|
|center |居中|
|flex-end |末端|
参考:
http://www.reactnative.vip/forum.php?mod=viewthread&tid=189&highlight=flexbox
http://blog.csdn.net/majiakun1/article/details/50497390
- 《React-Native系列》11、 图解RN布局之FlexBox,三分钟上手写RN界面
- 《React-Native系列》图解RN布局之FlexBox
- 《React-Native系列》图解RN布局之FlexBox
- React Native系列之flexbox布局(RN基础)
- React Native实战之flexbox布局(RN基础)
- 《React-Native系列》28、 RN之AsyncStorage
- 《React-Native系列》 RN学习之NodeJS
- 《React-Native系列》28、 RN之AsyncStorage
- 《React-Native系列》 RN学习之NodeJS
- RN-flexbox(弹性布局)
- RN布局(四)——在React Native中使用flexbox
- React Native系列之flexbox布局详解
- 《React-Native系列》14、 RN学习之NodeJS
- 《React-Native系列》15、 RN之可触摸组件
- 《React-Native系列》16、 RN组件之ListView
- 《React-Native系列》18、 RN之定时器Timer
- 《React-Native系列》20、 RN数据流之Flux概览
- 《React-Native系列》29、 RN组件之WebView
- 动态添加DataGridView Row Color
- MySQL查询数据
- 1004 Let the Balloon Rise
- GridView 组件的基本实现(本人也是个新手,哪里写的不对或者多余还请大家多多见谅)
- 链表
- 《React-Native系列》11、 图解RN布局之FlexBox,三分钟上手写RN界面
- ROS 学习 (1):publisher和subscriber消息 python
- iOS 修正拍出来的照片的方向
- Android studio的默认图标
- JDK里的设计模式
- ubuntu下git的使用
- Python练习100例-30
- JavaScript Function()
- Gson的简单使用