React Native 的布局(容器属性)

Flexbox 介绍


flexbox是由伸缩容器和伸缩项目组成。任何一个元素都可以使用flexbox布局。容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end;交叉轴的开始位置叫做cross start,结束位置叫做cross end
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size


容器属性

1.flexDirection(决定主轴方向)
2.flexWrap
3.flexFlow
4.justifyContent
5.alignItems
6.alignContent

1.flexDirection 项目的排列方向

container: {
    flexDirection:'row', //主轴水平,起点在左,默认值            
    flexDirection:'column', //主轴垂直,起点在上
    flexDirection:'row-reverse', //主轴水平,起点在右,
    flexDirection:'column-reverse', //主轴垂直,起点在下
}


2.flexFlow 默认情况下,项目都排在一条直线上,主要定义如果一条直线排不下,如何换行

container: {
    flexWrap:'nowrap', // 不换行, 默认
    flexWrap:'wrap', // 换行,第一行在上方
    flexWrap:'wrap-reverse', // 换行,第一行在下方
}

nowrap


wrap


wrap-reverse


3.flexFlow是flexDirection和flexWrap的简写形式,默认值为 主轴水平、不换行

container: {
     flexFlow:'flex-direction',
     flexFlow:'flex-wrap',
}

4.justifyContent定义了主轴上的对齐方式

container: {
    justifyContent:'flex-start', // 左对齐,默认值
    justifyContent:'flex-end', // 右对齐
    justifyContent:'center', // 居中
    justifyContent:'space-between', // 两端对齐,项目之间间隔相等
    justifyContent:'space-around', // 每个项目两端的间隔相等。所以项目间的间隔比项目与边框的间隔大一倍
}

5.alignItems 在交叉轴上如何对齐,只有在flexDirection为column时

container: {
    alignItems:'flex-start', // 交叉轴起点对齐
    alignItems:'flex-end', // 交叉轴终点对齐
    alignItems:'center', // 交叉轴中点对齐
    alignItems:'baseline', // 项目第一行文字的基线对齐
    alignItems:'stretch', // 如果项目未设置高度或设为auto,将占满整个容器的高度
}

6.alignContent 定义了多根轴线的对齐方式,如果项目只有一根轴线,该属性不起作用。

container: {
    alignContent:'flex-start', // 与交叉轴的起点对齐
    alignContent:'flex-end', // 与交叉轴的终点对齐
    alignContent:'center', // 与交叉轴的中点对齐
    alignContent:'space-between', // 与交叉轴两端对齐,轴线之间的间距间隔平均分布
    alignContent:'space-around', // 每根轴线两侧的间隔相等
    alignContent:'stretch', // 轴线占满整个交叉轴,默认值
}


6.flex当一个元素定义了flex属性时,表示该元素是可伸缩的(flex的属性值大于0的时候才可伸缩)

container: {
    flex:1, //只看中比例,不看重实际数值
}


发布了91 篇原创文章 · 获赞 26 · 访问量 16万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 编程工作室 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览