css使用justify-content:spance-between后子控件居中

Maybe ！

已于 2023-10-11 02:10:15 修改

阅读量158

点赞数

分类专栏： vue-css 文章标签： css 前端 uniapp

于 2023-10-11 02:09:47 首次发布

本文链接：https://blog.csdn.net/qq_32828749/article/details/133759439

版权

vue-css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!-- 收藏  拨打电话 -->
<view class="buttom">
	<view class="collect-btn">
		<u-icon name="star"></u-icon>
		<text>收藏</text>
	</view>
	<view class="callPhone">
		<u-icon name="phone"></u-icon>
		<text>拨打电话</text>
	</view>
</view>

.buttom{
			display: flex;
			position: fixed;   // 固定定位
			flex-wrap: wrap;  //让弹性盒元素在必要的时候拆行
			justify-content: space-between;
			bottom: 0;
			box-shadow: 0 2px 2px rgba(10, 16, 20, 0.54), 0 0 2px rgba(10, 16, 20, 0.52);
			text-align: center;
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;	
			.collect-btn{
				justify-content: center;
				align-items: center;
				display: flex;
				width: 50%;
			}
			.callPhone{
				width: 50%;
			    display: flex;
				flex-direction: row;  //主轴方向row 水平
				align-items: center;
				justify-content: center;
				
				background-color: #1296db;
			}
		}