先上效果图
html
<view class="content-row" >
<!-- 详细标题列表 -->
<view class="wrap-space-around">
<view class="left-flex-content">
<text class="badge blue-badge" >1</text>
</view>
<view class="right-flex-content">
<view>
<view>
<text class="black-color">标题:</text>
</view>
<view>
<text>发布人: </text>
<text>项目:</text>
</view>
</view>
</view>
</view>
</view>
.content-row {
color: #999;
margin: 20upx 16upx 0;
padding: 20upx 15upx;
border: 2upx solid #e2e2e2;
border-radius: 10upx;
box-shadow: 0 2upx 4upx 0 rgba(0,0,0,.05);
}
.wrap-space-around {
margin: 4upx 0;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
}
.badge {
position: relative;
display: inline-block;
padding: 0 12upx;
font-size: 24upx;
text-align: center;
background-color: #e60012;
color: #fff;
height: 40upx;
line-height: 40upx;
border-radius: 60upx;
}
.left-flex-content{
margin-right: 10upx;
vertical-align: top;
display: inline-block;
}
.blue-badge {
color: #2d8cf0;
background-color: #e5f2ff!important;
}
.right-flex-content{
flex-grow: 1;
position:relative;
width: 1%;
display: inline-block;
text-align: left;
}
其实简单总结的话 就是左边不设置宽度,右边设置flex-grow: 1; 不过这里要注意width一定是要设置的,设置一个最小值,不然会出现下面这种宽度超出的情况。 原创内容转载请注明出处
今天的文章flex 左右布局 左右内容自适应(右边宽度随着左边变化而变化)分享到此就结束了,感谢您的阅读。
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/20918.html