React native的flexbox布局（三）

发布时间：2020-12-15 06:49:35 所属栏目：百科来源：网络整理

导读：###1问什么要使用React Native 如何在开发成本和用户体验做到更好的平衡？很多时候，前端都有一种乐观的想法：H5可以替代原生应用 RN不仅可以使用前端开发的模式来开发应用，还能调用原生应用的UI组件和API ###2RN实战之flexbox布局 flexbo是Flexible Box的缩

###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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!