Let’s start with the renderings

html

<view class="content-row" > <! <view class="wrap-space-around"> <view class="left-flex-content"> </text> </view> <view class="right-flex-content"> <view> <view> <text class="black-color"> < / text > < text > project: < / text > < view > < view > < view > < view > < / view >Copy the code
.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; }Copy the code

Flex -grow: 1; Flex -grow: 1; Note that width must be set, set a minimum value, otherwise the following width will be exceeded.Original content reproduced please indicate the source