uniapp初级入门-flex布局学习14-悬挂式布局

代码

<template>
	<view>
		<view>悬挂式布局</view>
		<view class="media">
			<image src="../../static/logo.png" mode="" class="pic"></image>
			<view class="content">
				一段文字一段文字一段文字一段文字一段文字一段文字一段文字
			</view>
		</view>
		<view class="media">
			<image src="../../static/logo.png" mode="" class="pic"></image>
			<view class="content">
				一段文字一段文字一段文字一段文字一段文字一段文字一段文字
			</view>
		</view>
		<view class="media">
			<image src="../../static/logo.png" mode="" class="pic"></image>
			<view class="content">
				一段文字一段文字一段文字一段文字一段文字一段文字一段文字
			</view>
		</view>
		<view class="media">
			<image src="../../static/logo.png" mode="" class="pic"></image>
			<view class="content">
				一段文字一段文字一段文字一段文字一段文字一段文字一段文字
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss">
.media{
	display: flex;
	align-items: flex-start;
	margin-bottom: 20rpx;
	
	.pic{
		width: 150rpx;
		height: 150rpx;
		margin-right: 20rpx;
		padding: 20rpx;
	}
	
	.content{
		flex:1;
		padding:20rpx;
	}
}
</style>

图示