flexbox布局和属性

React Native的FlexBox布局

flexbox：弹性的相对布局
三个关键字 flexDirection，justifyContent，alignItems

React Native中的布局

容器属性

• flexDirection：主轴方向，默认是column

flexDirection:'column'(纵向排列，默认) | flexDirection:'row'(横向排列)`

flexDirection

flexDirection

• justifyContent：主轴对齐方式

flex-start | center | flex-end | space-around | space-between

justifyContent

• alignItems：侧轴对齐方式

flex-start | center | flex-end | stretch

alignItems

All.png

• flexWrap：换行还是不换行，默认是nowrap(一行)

  
  
  

  1240.png

元素属性

• flex

  
  
  

  flex

• alignSelf

  
  
  

  1240.png

flexbox布局总结：

• 宽高指定的情况下 stretch 无效
• 基于flex的布局，view默认宽度为100%
• 水平居中用alignItems, 垂直居中用justifyContent
• 基于flex能够实现现有的网格系统需求，且网格能够各种嵌套无bug

---

布局概念知识补

• 设置宽度或者高度时不用带单位,默认使用pt为单位
• 不能设置百分比来设置宽度或高度
• 可通过Dimensions模块来获取窗口高度
• 可通过PixelRatio模块来获取像素密度

1240.png

盒子模型图

1240-1.png

定位模式

• 支持absolute和relative定位
• 和css的标准不同的是,元素容器不用设置position: 'absolute|relative'
  
  

  1240-1.png

1240.png

参考资料

• FlexBox布局游戏
• Flex 布局教程：语法篇
• 理解Flexbox：你需要知道的一切

---

React布局

1 容器的6个属性：

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

• 1.1 flex-direction 决定主轴方向（即item的排列方向）
  • React Native 中默认为flexDirection:'column'

.box {
  flex-direction: row | row-reverse | column | column-reverse;
}
row（默认值）：主轴为水平方向，起点在左端
row-reverse：主轴为水平方向，起点在右端
column：主轴为垂直方向，起点在上沿
column-reverse：主轴为垂直方向，起点在下沿

flex-direction

• 1.2 flex-wrap 默认情况下，item都排在一条线（又称"轴线"）上。如果一条轴线排不下，如何换行。
  
  

  flex-wrap

.box {
  flex-wrap: nowrap | wrap | wrap-reverse;
}
nowrap（默认）：不换行
wrap：换行，第一行在上方
wrap-reverse：换行，第一行在下方

• 1.3 flex-flow 是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap

.box {
  flex-flow:  || ;
}

• 1.4 justify-content 属性是item在主轴上的对齐方式

.box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}
flex-start（默认值）：左对齐
flex-end：右对齐
center： 居中
space-between：两端对齐，项目中间间隔相等。
space-around：均匀分布，每个项目两侧的间隔都相等。所以，项目中间的间隔比项目与边框的间隔大一倍。

justify-content

• 1.5 align-items 是item在侧轴上如何对齐
  • React Native中默认为alignItems:'stretch'

.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}
flex-start：起点对齐
flex-end：终点对齐
center：中点对齐
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

align-items

• 1.6 align-content 定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用

.box {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

flex-direction

flex-wrap

justify-content

align-items