不同大小文字图片混合的底部对齐

使用align-item: baseline，阮一峰老师的这个属性演示图就说明的很直白了，而使用flex-end的方式是把文字所在的块作为操作对象，相比之下，用baseline给便捷

——-以上20200420下午更新———

声明：目前暂时还没发现能在各设备中（ios，安卓，pc）中都能同时做到完全底部对齐的方法，本文方法做的只是努力趋近对齐

使用flex

操作方法

1. 外部容器display: flex;且align-item: flex-end;(或者在子元素中分别设置align-self: flex-end;)
2. 不能设置overflow: hidden;
3. 子元素不同区块的height值设置与line-height相等，且设置为差不多和font-size值对应字体的高度差不多，刚好包住最好，超一点也可以，因为ios和安卓有小差别，自行权衡，如果height值小于font-size值对应高度，为了避免被截断，所以上面说不要设置overflow: hidden，一丢丢小不齐相比截断更难看出来

效果

1. ios中： 字体在子元素容器中偏上飘
2. 安卓中： 字体在子元素容器中偏下飘
3. pc（Chrome） 字体在子元素容器中较居中

正因为上面三种环境上中下都包含了，所以才有操作方法第3步中的建议，收缩height值到尽量刚好包住内容，用容器高度把内容收拢

补充

类似价格前的¥这种写死内容，但是font-size和主变量的不一样，这时可以用伪元素去做，不用新增dom节点，此时只设置font-size就足够了，就会自动与主变量底部对齐，因为处在一个盒模型，对齐的是同一条基线。