• React Native 弹性布局FlexBox


    React Native采用一中全新的布局方式:FlexBox(弹性布局)。可以很方便的实现各种复杂布局,是全新的针对web和移动开发布局的一种实现方式。

    何为FlexBox?

       完整名称为:the flexible box Module,旨在通过弹性的方式来对齐和分布容器中的组件。Flexbuju的主要思想是:让容器有能力让其子项目能够改变其宽度|高度|顺序,以最佳方式填充可用空间。

      在布局中,首先得确定主轴方向(flexDirection),主轴组件的对齐方式(justifyContent),侧轴组件的对齐方式(alignItems),通过以上四点可以基本确定布局。

    FlexBox属性:

    flexDirection:该属性确定了主轴方向,枚举值。

        row         主轴方向为水平,起点在左端。

        row- reverse      主轴方向为水平,起点在右端

        column(默认)    主轴方向为垂直,起点在上端

        column-reverse        主轴方向为垂直,起点在下端

    justifyContent:该属性确定了组件在主轴方向上的对齐方式,枚举值。

        flex-start(默认)   组件沿着主轴方向的起始位置靠齐。如:假如主轴方向是row的话就是左对齐,是row- reverse的话就是右对齐,是column的话就是上对齐,是 column-reverse的话就是下对齐。

        flex-end            组件沿着主轴方向的结束位置靠齐,和flex-start相反。

        space-between  组件在主轴方向上两端对齐,其中的间隔相等。

        space-around   组件会平均分配在主轴方向上,两端保留一定的位置空间。

    alignItems:组件在侧轴方向上的对齐方式。

        flex-start         组件沿着侧轴上的起点对齐

        flex-end          组件沿着侧轴上的终点对齐

        center      组价在侧轴方向上居中对齐

        stretch(默认)  组件在侧轴方向上占满

    flexWrap: 是否换行

    默认情况下,项目都排列在一条线上,放不下的部分则不放置,flexWap就是定义是否换行的。

        nowrap(默认)   不换行

        wrap            换行,第一行在上方

        wrap-reverse    换行,第一行在下方

    flex:有三个参数,默认参数为 0 1 auto。  第一个参数为flex-grow,第二,第三个为:flex-shrink和flex-basis。

    alignSelf:定义单个组件自己的对齐方式,默认为auto。枚举值:auto|flex-start|flex-end|center|baseline|stretch

    position:枚举值,absolute绝对定位,relative相对定位

  • 相关阅读:
    板邓:mysql navicat设置字段默认时间为当前时间
    板邓:wordpress用户和权限名称详细表
    板邓:jQuery设置和获取HTML、文本和值(转)
    板邓:wordpress自定义用户角色和权限全面解析
    板邓:wordpress给订阅者、投稿者上传图片权限
    七牛云
    redis 基础命令
    yeild 理解
    如何访问父类中私有的属性
    php反射
  • 原文地址:https://www.cnblogs.com/dtdxrk/p/11650039.html
Copyright © 2020-2023  润新知