reactNative flex布局

yummf

已于 2022-07-27 11:45:02 修改

阅读量325

点赞数

文章标签：前端

于 2022-07-27 11:27:45 首次发布

本文链接：https://blog.csdn.net/weixin_53911951/article/details/126010396

版权

下面展示一些 内联代码片。

// A code block
var foo = 'bar';

    flex: 1,
    //flexDirection
    flexDirection:"column-reverse" //默认横向,起点在下面
    flexDirection:"column" //默认横向
    flexDirection: "row" //纵向,起点在左端。
    flexDirection: "row-reverse" //纵向,**起点在右端。**
    
    //flexWrap
    flexWrap:"nowrap" //不换行
    flexWrap:"wrap" //换行，第一行在上方。
    flexWrap:"wrap-reverse" //换行，第一行在下方。

    //justify-content
    justifyContent:"flex-start"//左对齐
    justifyContent:"flex-end"//右对齐
    justifyContent:"center"//居中
    justifyContent:"space-between"//两端对齐，项目之间的间隔都相等。
    justifyContent:"space-around"//每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
    
    //align-items子集整体
    alignItems:"flex-start"：//交叉轴的起点对齐。
	alignItems:"flex-end"：//交叉轴的终点对齐。
	alignItems:"center"：//交叉轴的中点对齐。
	alignItems:"baseline": //项目的第一行文字的基线对齐。
	alignItems:"stretch"：//如果项目未设置高度或设为auto，将占满整个容器的高度。

    //alignSelf子级单个
    //alignContent对齐内容