flex弹性布局简单布局例子

效果图

<template>
	<view class="content">
		<view class="title">
			<text>Web前端工程师学习</text>
		</view>
		<view class="dataInfo">
			<view class="dataList" v-for="(item,index) in list" :key='index'>
				<image :src="item.url" mode="heightFix"></image>
				<text>{{item.title}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					url: 'https://tilin.gitee.io/super_hero_preview/static/icons/uniapp.png',
					title: 'UniApp'
				}, {
					url: 'https://tilin.gitee.io/super_hero_preview/static/icons/github.png',
					title: 'GitHub'
				}, {
					url: 'https://gitee.com/assets/favicon.ico',
					title: 'Giee'
				}, {
					url: 'https://www.runoob.com/wp-content/uploads/2017/01/vue.png',
					title: 'Vue'
				}, {
					url: 'https://www.runoob.com/wp-content/uploads/2016/02/react.png',
					title: 'React'
				}, {
					url: 'https://www.runoob.com/wp-content/uploads/2014/06/angular.jpg',
					title: 'AngularJS'
				}, {
					url: 'https://www.runoob.com/wp-content/uploads/2013/07/pic_html5.gif',
					title: 'H5'
				}, {
					url: 'https://www.runoob.com/wp-content/uploads/2014/05/python3.png',
					title: 'Python'
				}, {
					url: 'https://www.runoob.com/wp-content/uploads/2014/03/mysql.jpg',
					title: 'MySQL'
				}, {
					url: 'https://tilin.gitee.io/super_hero_preview/static/icons/nandian.png',
					title: '难点'
				}, {
					url: 'https://tilin.gitee.io/super_hero_preview/static/icons/zhuyi.png',
					title: '优化'
				}, {
					url: 'https://tilin.gitee.io/super_hero_preview/static/icons/over.png',
					title: '完结'
				}, ]
			}
		},
	}
</script>

<style>
	.title {
		text-align: center;
		padding: 30rpx 0;
	}

	.title text {
		color: #dedede;
		font-size: 55rpx;
		text-align: center;
		letter-spacing: 6rpx;
		text-shadow: 2rpx 2rpx 8rpx #000;
		opacity: .32;
	}

	.dataInfo {
		display: flex;
		flex-wrap: wrap;
		width: 90%;
		margin: 0 auto;
		text-align: center;
		border-top: 1px solid #ccc;
		border-left: 1px solid #ccc;
	}

	.dataList {
		width: calc((100% - 3px) / 3);  //显示几行就除以（减）几
		height: calc((100% - 3px) / 3);
		border-bottom: 1px solid #ccc;
		border-right: 1px solid #ccc;
		padding-top: 50rpx;
		padding-bottom: 50rpx;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
	}

	.dataList image {
		width: 70rpx;
		height: 70rpx;
	}

	.dataList text {
		display: block;
		font-size: 25rpx;
		color: #cccccc;
		font-weight: bold;
		padding-top: 30rpx;
	}
</style>