flex 左右布局 左右内容自适应（右边宽度随着左边变化而变化）

先上效果图

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一定是要设置的，设置一个最小值，不然会出现下面这种宽度超出的情况。

原创内容转载请注明出处