css 实现不定数量的tab切换和页面切换

遇到了一个Vue框架的开发场景，切换tab并且下面的页面内容跟随联动，tab的数量不定，需要跟随页面伸缩。实际上是一个简单的导航，但是想用原生实现并且考虑到兼容性的话开始考虑了一会儿，最后用table布局和v-指令来解决吧，实现效果和代码如下：
点击第一个tab：

image.png

点击第二个tab：

image.png

代码实现：

如果想实现多行的元素弹性布局，使用网格布局也是可以的，效果如下：

image.png

更改的代码如下：