在写小程序的时候,偶然发现的,挺有意思的
效果
html结构
<view class="icons">
<view class="circle">
<image class="icon" src="/images/icon/collection-anti.png"></image>
<image class="icon" src="/images/icon/share-anti.png"></image>
</view>
<view class="horizon"></view>
</view>
css
.icons{
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.icon{
padding-right: 20rpx;
width: 90rpx;
height: 90rpx;
}
.circle{
width: 100%;
display: flex;
justify-content: flex-end;
}
.horizon{
width: 100%;
height: 1px;
background-color: #e5e5e5;
position: absolute;
z-index: -2;
}
用定位也可以实现,但是大家现在都喜欢flex一把梭,核心就是大盒子flex,让两个小盒子居中,然后再让线脱离文档流,还有一个就是width100%然后高度1px就可以弄出一条线来