最近在写项目时用到了弹性盒子的项目属性,记录一下,以后用到继续扩充
<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;
}