Flex布局学习

父视图的四个属性

• flexDirection 布局方向
  1. column（默认）从左到右
  2. row 从上到下
  3. column-reverse 从右到左
  4. row-reverse 从下到上
• flexWrap
  1. nowrap (默认）超过屏幕不换行
  2. wrap 超过屏幕换行
• justifyContent 决定视图x轴位置
  1. flex-start (默认）从左到右
  2. flex-end 从右到左
  3. center 居中
  4. space-between 两端对齐
  5. space- around 平分局中
• alignItems 决定视图y轴位置
  1. flex-start （默认）从上到下
  2. flex-end 从下到上
  3. strength 拉伸
  4. center 局中

子视图的两个属性

• autoSelf
  1. auto (默认),使用父视图的alignItems的值，如果没有，默认为strength
  2. 与alignItems取值一样
• flex，相当于权值
  1. 0（默认）
  2. 其他数字，数字越大，权值越大

其他属性

• width和heigh
• 边框border开头
• 外边居margin开头
• 内边居padding开头
• 边缘left等
• 定位
  1. relative (默认）相当位置
  2. absolute