React-Native 第一章 布局

• Z时代
• 2024-01-10
• 分类：综合

FlexBox 布局

一种布局模式，适用于不同的屏幕尺寸和不同的显示设备，它给页面元素提供了适配这些情况的能力

• flexDirection
  

  决定主轴的方向
  

  指定flex容器的子元素是按行显示还是按列显示，也可以定义元素按升序显示还是按降序显示。
  row: 主轴为水平方向，起点在左端
  row-reverse: 主轴为水平方向，起点在右端
  column: (默认值)主轴为垂直方向，起点在上沿
  column-reverse: 主轴在垂直方向，起点在 下沿
  

• justifyContent
  

  定义了伸缩项目在主轴线的对齐方式
  

  声明浏览器如何分配元素之外的可用空间，比如有3个节点，它们组合起来一共占据了容器的50%的空间，我们能够指定元素是集中在左边、右边还是中间，或者是均匀地从左往右分布，或者其他的一些方式。
  flex-start (默认值)伸缩项目向一行的起始位置靠齐
  flex_end 伸缩项目向一行的结束位置靠齐
  center 伸缩项目向一行的中间位置靠齐
  space-between 两端对齐，项目之间的间隔都相等
  space-around 伸缩项目会平均地分布在行里，两端保留一半的空间
  

• alignltems
  

  定义项目在交叉轴上如何对齐，可以把其想象成侧轴（垂直于主轴）的对齐方式
  flex-start 交叉轴的起点对齐
  flex-end 交叉轴的终点对齐
  center 交叉轴的中点对齐
  baseline 项目的第一行文字的基线对齐
  stretch （默认值）如果项目未设置高度或auto，将占满整个容器的高度
  

• flexwrap
  

  默认情况下项目都排在一条线上，flex-wrap属性定义，如果一条轴线排不下，如何换行
  

  指定当flex子元素的总宽度超出了容器的空间时，是否换行显示。
  nowrap 不换行
  wrap 换行，第一行在上方
  wrap-reverse 换行，第一行在下方
  

元素属性

• flex
  

  flex-grow flex-shrink flex-basis三个属性的缩写，其中第二个和第三个参数（flex-shrink flex-basis）是可选参数
  

  默认值为” 0,1,auto “;
  

  宽度 = 弹性宽度 * （flexGrow/sum(flexGrow)）
  

• alignSelf
  

  align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性，默认值为auto,表示继承父元素的align-items属性，如果没有父元素，则等同于stretch
  auto
  flex-start
  flex-end
  center
  baseline
  stretch
  

以上是 React-Native 第一章 布局 的全部内容， 来源链接： utcz.com/z/382275.html