这两张图的布局在后台系统中很常见，通过简单的 CSS 就可以实现。不过我们更喜欢⽤组件化的开发⽅式，把这些 CSS 的细节封装到组件⾥，如下：
先来看模板部分：
复制代码
组件会渲染成⼀个 标签，并通过 slot 做内容分发。
再来看⼀下 CSS 部分：
@include b(container) { display: flex; flex-direction: row; flex: 1; flex-basis: auto; box-sizing: border-box; min-width: 0;}复制代码
重点看⼀下 CSS 部分，display:flex 创建了⼀个 flex 容器，flex-direction:row 指定了内部元素是在⽔平⽅向排列。这⾥为什么还有
flex:1 呢，因为 容器是⽀持嵌套的，并且我们知道 flex:1 相当于 flex-grow:1;flex-shrink:1;flex-basis:0，也就是当 被嵌套的时候，它
会占满剩余空间。flex-basis:auto 表⽰分配空间之前会先跟⽗容器预约⾃⾝内容⼤⼩的空间，然后剩下的才会归⼊到剩余空间。
容器默认是⽔平排列，当然也需要⽀持垂直排列，我们可以给组件提供⼀个 direction 的 prop，如果传⼊的 direction 是 vertical，添加
对应的 CSS。
复制代码export default { name: 'ElContainer', componentName: 'ElContainer', props: { direction: String }, computed: { isVertical() { if (this.direction === 'vertical') {
如果传⼊的 direction 为 vertical，则添加 is-vertical 的 CSS，最终通过修改 flex-direction:column 实现内部元素是在垂直⽅向排列。
回顾前⾯的⼀个需求：当 容器的⼦元素中包含 或 时，全部⼦元素会垂直上下排列，否则会⽔平左右排列。
实现它也很容易，扩展计算属性 isVertical 的判断条件即可：
computed: { isVertical() { if (this.direction === 'vertical') { return true; } else if (this.direction === 'horizontal') { return false; } return this.$slots && this.$slots.
这⾥⽤了⼀个⼩技巧，this.$slots.default 获取的是默认插槽中的所有 vnodes 节点，然后对他们遍历，通过
vnodeponentOptions.tag 来判断这个 vnode 是不是 或者是 。vnodeponentOptions 并不在官⽹ API ⾥，但是对于熟读
Vue 源码的⼈来说并不陌⽣。
ElHeader 组件
先来看⼀下模板部分：
复制代码
组件会渲染成⼀个 标签，并通过 slot 做内容分发。
再来看⼀下 CSS 部分：
@include b(header) { padding: $--header-padding; box-sizing: border-box; flex-shrink: 0;}复制代码
其中 $--header-padding 是⼀个变量，在 packages/theme-chalk/src/common/var.scss ⽂件中定义。fl
ex-shrink: 0 表⽰即使空间
不够，也不会缩⼩ 所占空间。
通常来说头部都会有⼀个固定⾼度，因此 允许你传⼊⼀个 height 的 props 来指定⾼度，如果不指定的话提供⼀个默认⾼度。
flex布局详细讲解
复制代码export default { name: 'ElHeader', componentName: 'ElHeader', props: { height: { type: String, default: '60px' } }}；复制代码
由于直接通过 :style 设置的样式，所以这⾥传⼊⾼度的时候⼀定要携带单位。
ElMain 组件
先来看⼀下模板部分：
复制代码
组件会渲染成⼀个 标签，并通过 slot 做内容分发。
再来看⼀下 CSS 部分：
@include b(main) { // IE11 supports the  element partially caniuse/#search=main display: block; flex: 1; flex-basis: auto; overflow: auto; box-siz
注意， 标签在 IE11 中是部分⽀持的。通常 中包裹的内容完全由它的⼦元素来决定，所以并不会设置⾼和宽，只是通过 flex:1 来分配 容器的剩余空间。
ElFooter 组件
先来看⼀下模板部分：
复制代码
组件会渲染成⼀个 标签，并通过 slot 做内容分发。
再来看⼀下 CSS 部分：
@include b(footer) { padding: $--footer-padding; box-sizing: border-box; flex-shrink: 0;}复制代码
和头部⼀样，通常底部也会有⼀个固定⾼度，因此 允许你传⼊⼀个 height 的 props 来指定⾼度，如果不指定的话提供⼀个默认⾼度。
复制代码export default { name: 'ElFooter', componentName: 'ElFooter', props: { height: { type: String, default: '60px' } }}；复制代码
ElAside 组件
先来看⼀下模板部分：
复制代码
组件会渲染成⼀个 标签，并通过 slot 做内容分发。
再来看⼀下 CSS 部分：
@include b(aside) { overflow: auto; box-sizing: border-box; flex-shrink: 0;}复制代码
组件⽤来渲染侧边栏，⽽侧边栏通常会有宽度，因此 ，允许你传⼊⼀个 width 的 props 来指定宽度，如果不指定的话提供⼀个默认宽度。
复制代码export default { name: 'ElAside', componentName: 'ElAside', props: { width: { type: String, default: '300px' } }}；复制代码
总结
element-ui 的 Container 布局容器组件的实现还是很简单的：创建了⼀些语义化的标签，利⽤插槽做内容分发，通过 flex 实现布局效
果。
学习完这篇⽂章，你可以顺便对 flex 布局、HTML5 的语义化标签做⼀下复习，加深理解，并了解到 Vue 源码中的⼀些⼩技巧。
把不会的东西学会了，那么你就进步了，如果你觉得这类⽂章有帮助，也欢迎把它推荐给你⾝边的⼩伙伴。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。