flex布局实现价格及￥的向下对其

先来看看ui小姐姐给的样式：

而我写出来的却长这样：

emmmm

看着代码也没啥问题啊

    <section class="headline">
      <h2>订单详情</h2>
      <p class="total" style="display: flex; align-items:flex-end; justify-content: flex-end">
        <span>总价：</span>
        <span>￥</span>
        <span>2099</span>
      </p>
    </section>

看了软大神的 flex布局教程，大概知道了原因。
因为 align-items:flex-end 设置的是整个元素在x轴上的向下对齐，但字体的对齐并不算是 ‘元素的对齐’，而是通过 baseline(字体基线)这个属性来控制，我们比较常用到的样式vertical-align: middle | top| bottom | baseline ... 设置的就是字体对齐基线的值。

来看看下图：

align-items

基于这个原理，所以flex设置文字的对齐应该用 "align-items: baseline" 而不是 "align-items: flex-end" ,如下：

    <section class="headline">
      <h2>订单详情</h2>
      <p class="total" style="display: flex; align-items:baseline; justify-content: flex-end">
         ...
      </p>
    </section>

或者：

    <section class="headline">
      <h2>订单详情</h2>
      <div style="display: flex; align-items:flex-end; justify-content: flex-end">
        <p class="total">
            ...
        </p>
      </div>
    </section>

其实不在不受父级元素影响的话，字体的vertical-align默认值就是”baseline“。