7.图片/文字排列

字体大小
水平对齐排列
滚动水平对齐

字体：font。属性在一个声明中设置所有字体属性。
可设置的属性是（按顺序）： “font-style font-variant font-weight font-size/line-height font-family”.
font-size和font-family的值是必需的。如果缺少了其他值，默认值将被插入，如果有默认值的话.
1.font-style：文字样式。
取值：normal 正常的字体， italic 斜体字， oblique 倾斜的字体。
2.font-weight：设置文本字体的粗细。取值范围为100-900.
取值：mormal：正常大小相当于400。bold :粗体，相当于700。bolder， lighter。
3.font-size：设置字体尺寸大小。
4.font-variant:设置对象中的文本是否为小型的大写字母。
取值：mormal 正常的字体.small-caps 小型的大写字母字体.设置后会不论原来是否为大小字母全部改为大写。
5.font-family:设置字体名称。
6.font-stretch:设置对象中的文字是否横向拉伸变形。
取值：normal：正常文字宽度。
ultra-condensed：比正常文字宽度窄4个基数。
extra-condensed：比正常文字宽度窄3个基数。
condensed：比正常文字宽度窄2个基数。
semi-condensed：比正常文字宽度窄1个基数。
semi-expanded：比正常文字宽度宽1个基数。
expanded:比正常文字宽度宽2个基数.
extra-expanded：比正常文字宽度宽3个基数。
ultra-expanded：比正常文字宽度宽4个基数。
7.font-size-adjust：只有火狐支持。设置对象的 aspect 值，用以保持首选字体的 x-height。
如果 14px 的 Verdana（aspect 值是 0.58）不可用，但是某个可用的字体的 aspect 值是 0.46，
那么替代字体的尺寸将是 14 * (0.58/0.46) = 17.65px。
8.@font-face:通过这个可以添加外部的字体。

水平对齐排列

<View className='at-col' style='display: flex;background:pink;height:86%;'>
<Image  style='max-width:300rpx;height:100%' src={item.url}  mode='scaleToFill'></Image>
<View style='width:65%;margin-left:20rpx;margin-right:20rpx;white-space:pre-line;background:gray'>{item.title}</View>
</View>

使用了width、height定位无效，使用了以下四行代码，发觉align-items: center并不能实现水平对齐，主要还是display: flex实现的，即flex 弹性布局

.at-col{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center; 
}

滚动水平对齐

<View style='z-index:-1;top:820rpx;position:relative;'><Scrolys /></View>

<View className='at-rol scrolys'>
{
  data2.map(item => (
    <ScrollView className='scrollview1' scrollY='true' scrollTop >
      <View style='display: flex; background:gray;'>
        <Image style='max-height:240rpx;max-width:300rpx;' src={item.url}  mode='scaleToFill'></Image>
        <View >{item.title}</View>
      </View>
    </ScrollView>      
  ))
  }  
</View>

text自动换行

.textView {
  width: 100%;
  word-break: keep-all;
  word-wrap: break-word;
}

注意事项

不建议设置绝对定位

例如在设置scroll滚动的时候，如果scroll位置上方的View设置绝对定位，会变成scroll部分滚动，即绝对定位的不滚动，只有scroll滚动，可能会涉及z-index问题(滚动的时候谁在上面谁在下面。z-index设置的值越大越在外面)
滚动的时候覆盖不到scroll的地方还要进行修饰，比较麻烦。
正常流程是不设置绝对定位，设置相对定位，让UI整屏向上滑动

外层圈框

比如涉及Image图片尺寸的时候，margin的调节比较繁琐，有可能会碰到margin、margin-right都尝试了，分布还是达不到预期目标。
建议先在外层包一层View，在这层View上设置一下宽度比例，这样调节图片的时候会方便一些

字体大小

水平对齐排列

滚动水平对齐

text自动换行

不建议设置绝对定位

外层圈框