css等高布局

首先页面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：在每个栅格项目之间放置一个均匀的空间，上下两端放置一个均匀的空间