页面框架搭建模板可复用

test.vue页面如下:
`

2:上下结构的：

<template>
	<div class="board" v-cloak>
		<div class="board-T">
			<div class="board-T-item">
				<wip v-if="isBoard" :boardData="boardData" :upIndex="upIndex" :fId="fId" class="board-border"></wip>
			</div>
			<div class="board-T-item">
				<!-- <uph v-if="isBoard" accesskey="" :boardData="boardData" :upIndex="upIndex" :fId="fId" class="board-border"></uph> -->
				<div class="board-l">
					<div class="board-item">
						<wip v-if="isBoard" :boardData="boardData" :upIndex="upIndex" :fId="fId" class="board-border">
						</wip>
					</div>
				</div>
				<div class="board-m">
					<div class="board-item">
						<lines v-if="isBoard" :boardData="boardData" :upIndex="upIndex" :fId="fId" class="board-border"></lines>
					</div>
				</div>
				<div class="board-r">
					<div class="board-item">
						<oee v-if="isBoard" :boardData="boardData" :upIndex="upIndex" :fId="fId" class="board-border">
						</oee>
					</div>
				</div>
			</div>
		</div>

	</div>
</template>

<style lang="less" scoped>
	div {
		box-sizing: border-box;
	}

	.board {
		width: 100%;
		height: calc(100vh - 70px);
		overflow: hidden;
		display: flex;
		box-sizing: border-box;
		background: #03044a;

		.board-T {
			width: 100%;
			height: 100%;

			.board-T-item {
				width: 100%;
				height: calc(100% / 1.5);
				color: #fff;
				padding: 10px;
				padding-bottom: 0px;
				display: flex;
                .board-l,.board-m,.board-r{
					width: 33%;
					height: 100%;
					border: 1px solid blue;
					margin-right: 8px;
					.board-item {
						width: 100%;
						height: 100%;
						border: 1px solid #0d2451;
						position: relative;
						overflow: hidden;
						background: #151456;
					}
				}
				&:last-child {
					border: none;
					padding-bottom: 10px;
				}
			}
		}

		.board-border {
			width: 100%;
			height: 100%;
			border: 1px solid #0d2451;
			position: relative;
			overflow: hidden;
			background: #151456;
		}
	}

	[v-cloak] {
		display: none;
	}
</style>

3：上下左右：拿来吧你

<template>
	<div class="board" v-cloak>
		<div class="board-T">
			<div class="board-T-item">
				<!-- <wip v-if="isBoard" :boardData="boardData" :upIndex="upIndex" :fId="fId" class="board-border"></wip> -->
				<div class="top-L">
					<div class="top-L-item"></div>
					<div class="top-L-item"></div>
					<div class="top-L-item"></div>
				</div>
				<div class="top-R">
					<div class="top-L-item"></div>
					<div class="top-L-item"></div>
				</div>
			</div>
			<div class="board-T-item">
				<div class="board-l">
					<div class="board-item">
						<wip v-if="isBoard" :boardData="boardData" :upIndex="upIndex" :fId="fId" class="board-border">
						</wip>
					</div>
				</div>
				<div class="board-r">
					<div class="board-item">
						<oee v-if="isBoard" :boardData="boardData" :upIndex="upIndex" :fId="fId" class="board-border">
						</oee>
					</div>
				</div>
			</div>
		</div>

	</div>
</template>
<script>

</script>
<style lang="less" scoped>
	div {
		box-sizing: border-box;
	}

	.board {
		width: 100%;
		height: calc(100vh - 70px);
		overflow: hidden;
		display: flex;
		box-sizing: border-box;
		background: #03044a;

		.board-T {
			width: 100%;
			height: 100%;

			.board-T-item {
				width: 100%;
				height: calc(100% / 1.5);
				color: #fff;
				padding: 10px;
				padding-bottom: 0px;
				display: flex;
				.top-L {
					width: 30%;
					.top-L-item {
						width: 100%;
						height: 30%;
						border: 1px solid blue;
						margin-bottom: 5px;
					}
					.top-L-item:last-child {
						// height: 40%;
						height: calc(40% - 10px) //跟上面margin-bottom大小5px*2=10保持一致
					}
				}
				.top-R {
					width: 70%;

					.top-L-item {
						width: 100%;
						height: 50%;
						border: 1px solid blue;
						margin-bottom: 5px;
					}
					.top-L-item:last-child {
						height: calc(50% - 5px) //跟上面margin-bottom大小保持一致
					}
				}

				.top-L,
				.top-R {
					margin-right: 5px;
					height: 100%;
					// border: 1px solid blue;
				}

				.board-l,
				.board-r {
					width: 50%;
					height: 100%;
					border: 1px solid blue;
					margin-right: 8px;

					.board-item {
						width: 100%;
						height: 100%;
						border: 1px solid #0d2451;
						position: relative;
						overflow: hidden;
						background: #151456;
					}
				}

				&:last-child {
					border: none;
					padding-bottom: 10px;
				}
			}
		}
		.board-border {
			width: 100%;
			height: 100%;
			border: 1px solid #0d2451;
			position: relative;
			overflow: hidden;
			background: #151456;
		}
	}

	[v-cloak] {
		display: none;
	}
</style>

如何对其遍历的格式，当每行文字超过的，样式适配到与最高的对齐

父：
	.device_list {
		font-size: 1rem;
		margin-right: 2%;
		cursor: pointer;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		-webkit-box-pack: start;
		-ms-flex-pack: start;
		justify-content: flex-start;
	}
子：
.device_info[data-v-12d55f75] {
    /* width: 8rem; */
    width: calc(100% / 9);
    /* height: calc(100% / 2.5); */
    border: 1px solid #54aafb;
    background: #024c97;
    display: inline-block;
    margin: 0.5rem;
    float: left;
    font-size: 0.8rem;
}