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

  • 相关阅读:
    Canny边缘检测高低阈值问题
    EffectiveC++ Item25测试
    下载videolectures.net里的视频的方法
    01章 象数易理篇之一
    论文格式问题
    反序列化笔记
    什么是动爻
    EffectiveC++ Item25说的东东
    优化功能
    论文修改意见
  • 原文地址:https://www.cnblogs.com/farmerkids/p/5972184.html
Copyright © 2011-2022 走看看