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