uniapp开发技巧

实现文字在中间两边有条线

<template>
	<view>
		contact
		<view class="flex">
			<view class="box1">
				盒子一
			</view>
			<text>flex-grow 属性用于设置或检索弹性盒子的扩展比率  注意：如果元素不是弹性盒对象的元素，则 flex-grow 属性不起作用</text>
			<view class="box2">
				<view class="line">

				</view>
				<view>
					盒子二
				</view>
				<view class="line">

				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style>
	.box2{
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.line {
		height: 2upx;
		background-color: red;
		/* 左右都是一份 */
		/* flex-grow: 1; */
		/* 弹性盒模型中flex-grow 和flex的区别    https://www.cnblogs.com/jinyuting/p/13199704.html   */
		flex: 1;
	}
</style>