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

flex 左右布局 左右内容自适应(右边宽度随着左边变化而变化)先上效果图 html 其实简单总结的话 就是左边不设置宽度,右边设置flex-grow: 1; 不过这里要注意width一定是要设置的,设置一个最小值,不然会出现下面这种宽度超出的情况。 原创内容转载

先上效果图

在这里插入图片描述在这里插入图片描述 在这里插入图片描述

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

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注