zoukankan      html  css  js  c++  java
  • RN开发-Flex

    1、容器属性
            (1). display : flex | inline-flex (块级伸缩容器 | 行内级伸缩容器)
            (2). flex-direction : row | row-reverse | column | column-reverse (主轴线方向)
            (3). flex-wrap : nowrap | wrap | wrap-reverse (主轴线空间不足是否换行及换行方向)
            (4). flex-flow : row nowrap (2与3的交集属性)
            (5). justify-content : flex-start | flex-end | center | space-between | space-around (主轴线对齐方式)
            (6). align-items : flex-start | flex-end | center | baseline | stretch (交叉轴对齐方式)
            (7). align-content : stretch | flex-start | flex-end | center | space-between | space-around (伸缩项目换行后对齐方式)

        2、项目属性
            (1). order 整数值(默认0),排序方式,越小越靠前
            (2). flex-grow (默认0),放大比例(类似android:weight),空间不足不起作用
            (3). flex-shrink(默认1),收缩比例,空间不足起作用
            (4). flex-basis : auto | length (设置项目伸缩的基础值,剩余空间按比例伸缩)
            (5). flex : none | flex-grow flex-shrink flex-basis (2,3,4交集)
            (6). align-self : auto | flex-start | flex-end | center | baseline | stretch (用了设置单独的项目在交叉轴上的对齐方式)
        
        3、RN中支持的属性:
            (1). justifyContent (X轴对齐方式) : flex-start | flex-end | center | space-between | space-around
            (2). flexDirection (布局方向) : row | row-reverse | column | column-reverse
            (3). flexWrap (换行及换行方向) : nowrap | wrap | wrap-reverse
            (4). alignItems (Y轴对齐方式) : flex-start | flex-end | center | baseline | stretch
            (5). alignSelf (item在Y轴对齐方式): auto | flex-start | flex-end | center | baseline | stretch
            (6). flex : flex

  • 相关阅读:
    初识HTML
    django中这是登录过期时间
    linux之几个重要性能指标
    linux之查看端口占用
    python目录操作整理
    jmeter用户自定义变量的实际使用
    ubuntu安装mysql与配置外网访问
    ubuntu 16.04部署python项目(Nginx+uwsgi+django)
    selenium脚本奇怪报错
    在Ubuntu云服务上部署jenkins
  • 原文地址:https://www.cnblogs.com/farmerkids/p/5972184.html
Copyright © 2011-2022 走看看