React Native 之 flexbox布局

前端之家收集整理的这篇文章主要介绍了React Native 之 flexbox布局前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

React Native中支持的flexBox属性

  1. justifyContent : 定义伸缩项目沿主轴线上的对齐方式。

    flex-start:
    flex-end:
    center:
    space-between: 根据属性值的字面意思,剩余的空间留在伸缩项目之间,而且是平均分配,第一个伸缩项目在主轴线的开始位置和main start没有间隙,最后一个伸缩项目在主轴线的结束位置和main end没有间隙。
    space-around:根据属性值的字面意思也很好理解,剩余的空间环绕着伸缩项目,伸缩项目之间平均分配剩余空间,两端伸缩项目距离主轴线的main start和main end,保留一半的空间。

  2. alignItems: 定义伸缩项目在伸缩容器的交叉轴上的对齐方式。
    flex-start:
    flex-end:
    center:
    baseline: 单词的解释是基准线,在交叉轴方向沿基准线中心对齐(这块理解的不好)。
    stretch:伸展,伸缩项目在交叉轴方向拉伸填充整个伸缩容器。(想看到这个属性值的效果,伸缩项目不能设置交叉轴上的长度)。

  3. flexDirection:指定主轴的方向,与LinearLayout中的android:orientation属性相似。
  4. flex: 此属性,由三个属性构成,flex-grow定义了方法比例,flex-shrink定义了缩小比例,flex-basis定义了指定大小,语法:flex:flex-grow flex-shrink flex-basis。如flex:1 ,填充满伸缩容器剩余的空间。
  5. position:“relative”和 “absolute”

注:justifyContent和alignItems可以定义控件中文内容显示位置,等同于我们在Android Native开发中LinearLayout的android:gravity属性效果

原文链接:https://www.f2er.com/react/306990.html

猜你在找的React相关文章