首先页面template如下：
<template lang="pug">
div.box
div.left
p leftbos
div.center
p center
p center
div.right
p right box
</template>
1.table
table元素中的table-cell元素默认就是等高的
.box{
display: table;
}
.left,.center,.right{
display: table-cell;
}
2.flex布局
.box{
display: flex;
}
.left,.center,.right{
flex: 1;
}
3.grid布局-flex升级版本
.box{
display: grid;
grid-auto-flow: column;
}
grid的一些常用属性：
grid-template-columns: 100px 100px; //有几列，每列有多大
grid-template-rows :100px 100px; //有几行，每行有多大
grid-template: [] '1 1 1' 100px [] /auto 50px auto;
[名称] '几列' 这行的高度 [名称] /三列对应的三个宽度（名称可为空 '1 1 1' 就是均分三列）
grid-gap: 10px 20px ;//上下间隔10px，左右间隔20px
grid-gap: 10px；//上下左右间隔10px
grid-column-gap
grid-row-gap
justify-items：
start：将内容对齐到网格区域(grid area)的左侧
end：将内容对齐到网格区域的右侧
center：将内容对齐到网格区域的中间（水平居中）
stretch：填满网格区域宽度（默认值）
align-items：
start：将内容对齐到网格区域(grid area)的顶部
end：将内容对齐到网格区域的底部
center：将内容对齐到网格区域的中间（垂直居中）
stretch：填满网格区域高度（默认值）
justify-items：
start：将网格对齐到 网格容器(grid container) 的左边
end：将网格对齐到 网格容器 的右边
center：将网格对齐到 网格容器 的中间（水平居中）
stretch：调整 网格项(grid items) 的宽度，允许该网格填充满整个 网格容器 的宽度
space-around：在每个网格项之间放置一个均匀的空间，左右两端放置一半的空间
space-between：在每个网格项之间放置一个均匀的空间，左右两端没有空间
space-evenly：在每个栅格项目之间放置一个均匀的空间，左右两端放置一个均匀的空间
align-content：
start：将网格对齐到 网格容器(grid container) 的顶部
end：将网格对齐到 网格容器 的底部
center：将网格对齐到 网格容器 的中间（垂直居中）
stretch：调整 网格项(grid items) 的高度，允许该网格填充满整个 网格容器 的高度
space-around：在每个网格项之间放置一个均匀的空间，上下两端放置一半的空间
space-between：在每个网格项之间放置一个均匀的空间，上下两端没有空间
space-evenly：在每个栅格项目之间放置一个均匀的空间，上下两端放置一个均匀的空间
