第三章:reactNative开发中弹性盒子布局
2017-11-08 14:34
369 查看
在css3
中提供了一个弹性盒子布局适合手机端开发,在reactNative
官方也推荐使用的布局方式,至于概念就不去介绍,就介绍几个常用的属性。更多信息请查阅阮一峰
一、区分容器属性与项目属性
简单来说你使用了display:flex的元素就是容器属性,它下面的元素就是项目属性
二、常见的容器属性
1、flex-direction 决定项目是水平排列还是垂直排列row 水平排列
row-reverse 水平反向排列
column 垂直排列
column-reverse 垂直反向排列
2、flex-wrap 决定项目如果一行排列不下以什么方式展示
nowrap 不换行
wrap 换行
wrap-reverse; 换行排列在上面
3、flex-flow 是flex-direction属性和flex-wrap属性的简写形式可以不去理会
4、justify-content 项目在主轴上的对齐方式
flex-start 开始位置
flex-end 结束位置
center 中间
space-between 两端对齐,项目之间的间隔都相等
space-around 每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍
5、align-items 项目在交叉轴上的对齐方式
flex-start
flex-end
center
baseline
stretch
6、align-content 多根轴线的对齐方式
三、常见的项目属性
1、order 排序方式,数字越小就越在前面2、flex-grow 定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大
3、flex-shrink 定义了项目的缩小比例,默认为1
4、flex-basis 属性定义了在分配多余空间之前,项目占据的主轴空间
5、flex 是flex-grow、flex-shrink和flex-basis三属性的简写总和
6、align-self 允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性
项目属性中常用的flex:1表示平分 align-self表示单独定义项目的布局方式
相关文章推荐
- React Native 入门(九) - Flexbox 弹性盒子布局
- React Native 弹性布局FlexBox
- React Native 弹性布局FlexBox
- [React Native混合开发]React Native中的Flexbox布局
- React Native入门——布局实践:开发京东客户端首页(二)TabBar的构建
- React Native布局实践:开发京东客户端首页遇到的坑
- React Native布局实践:开发京东客户端首页(四)——首页功能按钮及控件封装
- [React Native混合开发]React Native for iOS之CSS和UI布局
- React Native入门——布局实践:开发京东客户端首页
- [React Native混合开发]React Native for iOS之布局实战
- [React Native混合开发]React Native for iOS之布局实战(二)
- 开发一个基于React Native的简易demo--视频组件+布局
- React-Native 学习系列课程笔记(React-Native 开发从零开始)
- React-Native之flexbox布局
- 混合开发的大趋势之一React Native Props (属性)
- React-Native基础_3.Flex布局
- 【React Native开发】React Native控件之ListView组件解说以及最齐全实例(19)
- 使用Subline开发React-Native编辑器环境搭建
- 混合开发的大趋势之一React Native与Android联调