Flex弹性盒子的项目属性

最近在写项目时用到了弹性盒子的项目属性，记录一下，以后用到继续扩充

    <div class="concern-data">
      <div>
        <img src="https://meituan.thexxdd.cn/lvyou/assets/pinglun-fc62482a.svg" alt="">
        <span>1</span>
      </div>
      <div>
        <img src="https://meituan.thexxdd.cn/lvyou/assets/shoucang-c89a5218.svg">
        <span>7</span>
      </div>
      <div>
        <img src="https://meituan.thexxdd.cn/lvyou/assets/dianzan-99854f7a.svg" alt="">
        <span>10</span>
      </div>
     
    </div>

需求就是：把数量显示在图标图片的右上角

  align-self: flex-end;  /*右下角*/

.concern-data span{
  font-size: 14px;
  display: block;
  align-self: flex-end;  /*右下角*/
  color: #717375;
}

  align-self: flex-start;   /*右上角*/ 

.concern-data span{
  font-size: 14px;
  display: block;
  align-self: flex-start;   /*右上角*/
  color: #717375;
}