React native的flexbox布局(三)

前端之家收集整理的这篇文章主要介绍了React native的flexbox布局(三)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
###1问什么要使用React Native
如何在开发成本和用户体验做到更好的平衡?很多时候,前端都有一种乐观的想法:H5可以替代原生应用
RN不仅可以使用前端开发的模式来开发应用,还能调用原生应用的UI组件和API
###2RN实战之flexBox布局
flexbo是Flexible Box的缩写,弹性盒子布局,主流的浏览器都支持
flexBox布局是伸缩容器(container)和伸缩项目(item)组成
FlexBox布局的主题思想是元素可以改变大小以适应可用空间,当可用空间变大,Flex元素将伸展大小以,
填充可用空间,当Flex元素超出可用空间时将自动缩小。总之,Flex元素是可以让你的布局根据浏览器的
大小变化进行自动伸缩。
按照伸缩流的方向布局
伸缩容器有主轴和交叉轴组成!主轴既可以是水平轴,也可以是垂直轴
lexBox目前还处于草稿状态,所有在使用flexBox布局的时候,需要加上各个浏览器的私有前缀,即-webkit -moz -ms -o等
###伸缩器的属性
1.display
display:flex | inline-flex
块级伸缩容器 行内级伸缩容器
2.flex-direction
指定主轴的方向 flex-direction:row| row-reverse |column|column-reverse
3.flex-wrap
伸缩容器在主轴线方向空间不足的情况下,是否换行以及该如何换行
flex-wrap:nowrap | wrap |wrap-reverse
4.flex-flow
是flex-direction和flex-wrap的缩写版本,它同时定义了伸缩容器的主轴和侧周,其默认值为 row nowrap
即flex-flow:row nowrap;
5.justify-content
用来定义伸缩项目再主轴线的对齐方式,语法为:
justify-content:flex-start|center|flex-end|space-between|space-around分别为水平居左、中、右 、
顶边平均分配、有间距平均分配
6.align-items
用来定义伸缩项目再交叉轴上的对齐方式,语法为:
align-items:flex-start(默认值)|center|flex-end|baseline|stretch
7.align-content
用来调整伸缩项目出现换行后在交叉轴上的对齐方式,语法为:
align-content:flex-start|flex-end|center|space-between|space-around|stretch 原文链接:https://www.f2er.com/react/302866.html

猜你在找的React相关文章