Vue利用flex和grid实现圣杯布局

什么是圣杯布局？

• header和footer各自占领屏幕所有宽度，高度固定。
• 中间的container是一个三栏布局。
• 三栏布局两侧宽度固定不变，中间部分自动填充整个区域。
• 中间部分的高度是三栏中最高的区域的高度。

实现方法一：利用flex 

<template>
<div class="container">
<div class="left"></div>
<div class="mid"></div>
<div class="right"></div>
</div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
    };
  },
  }
</script>

<style>
.container{
width: 80vw;
height: 80vh;
outline: 5px solid red;
display: flex;
/* 纵向弹性布局 */
/* flex-direction: column; */
}
.left{
width: 200px;
height: 100%;
background-color: royalblue;

}
.mid{
flex:1; /* 分掉剩余部分 1份 */
height: 100%;
background-color: rgb(29, 158, 61);
}
.right{
width: 200px;
height: 100%;
background-color: rgb(212, 146, 182);
}
</style>
效果图：

实现方法二：利用grid 

注意grid中grid-row; 以及 grid-column;属性

grid-row;指网格的行数，grid-column;指网格的列数 

例如    grid-row:1; grid-column:1/5;指占网格的第一行，且占第一行的1到5列

<template>
    <div class="body">
        <div id="header">header</div>
        <div id="left">left</div>
        <div id="middle">middle</div>
        <div id="right">right</div>     
        <div id="footer">footer</div>
    </div>

</template>
<script>
export default {
  name: "App",
  data() {
    return {
    };
  },
  }
</script>

<style>
.body{
    display: grid;
}
#header{
    background: red;
    grid-row:1;
    grid-column:1/5;
}
    
#left{
    height: 200px;
    grid-row:2;
    grid-column:1/2;
    background: orange;
}
#middle{
    grid-row:2;
    grid-column:2/4;
    background: rebeccapurple
}
#right{
    grid-row:2;
    grid-column:4/5;
    background: cadetblue;
}
#footer{
    background: gold;
    grid-row:3;
    grid-column:1/5;
}
</style>
 

总之：

flex是一维布局 ，grid是二维布局也就是说grid布局可以更好的操作行和列。flex布局和grid布局是现在的主流的两种布局方式。我个人偏向使用grid布局，只是浏览器的支持没有flex多。