0 环境
1 参考文档
2 前言
横向布局比较直观就是上面是菜单，中间是tab ，下面是main。
和纵向布局有啥区别呢，一个就是纵向的header的左边组件去掉了。还有就是横向布局的菜单是置顶的，不同于纵向布局设置在左侧。
还有不同于纵向、经典布局，它会有3个句号，也就说菜单的显示数量的有限制的。但是在拉宽屏幕的时候，数量就变多了，说明这里是动态的。其它的改变自行体验。
3 分析
现在是分el-header 和Main 。Main 空空如也，没啥好说，el-header 里有分logo 、菜单、ToolBarRight组件。
再看下面的代码，和以前的没啥变化。也就说css样式的调整和menu的加了弹出层偏移量 改动，加了mode="horizontal" 。 
4 样式解释
先看下没有样式时的界面。 
先看第2-3行，设置宽高。然后第5-12行，和经典布局也是一样的，设置盒模型，flex布局，垂直水平居中。设置高度、右填充、背景色、1像素宽的实线边框。.logo 设置宽度和右边距，.logo-img 设置svg图标 的宽度和自适应填充。.logo-text 标题的设置，设置右边距、字体大小和粗细以及颜色、文本不换行。 .el-menu 是重点，flex:1占据剩余的所有空间，这里是个技巧，高度占满，内容超出就隐藏，不要有下边框。
.el-sub-menu__hide-arrow 其实设置的是3个句号的宽度。 
再往下 .el-menu-item.is-active ，菜单项被激活，颜色设为白色。.is-active 设置背景色、底部边框颜色。伪元素是不需要宽度的。标题为白色、设置背景色、底部边框颜色。 
媒体查询，当屏幕宽度小于730px ，隐藏logo 。 
额外补充： .flx-center 是通用的设置，水平垂直居中。 
5 总结
了解即可，主要是处理el-header里的布局，比如菜单。