Vue组件置底方法，ElementPlus布局

本文主要是介绍Vue组件置底方法，ElementPlus布局，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

问题描述

在开发网页时使用了elementplus的el-container组件

组件里分成了main和footer两块，但是想要将两个按钮置底在容器底部遇到了困难

如下图所示，在网页开发者工具可见两个按钮与左侧的图片没有底部对齐

此时我的代码是这样

<el-footer><el-row :gutter="20" style="  display: flex;justify-content: space-between;"><el-space><el-col :span="6"><el-button @click="button1function" type="primary">button1</el-button></el-col><el-col :span="6"><el-button @click="button2function" type="primary">button2</el-button></el-col></el-space></el-row> 
</el-footer>

解决办法

<el-footer class="align-bottom"><el-row :gutter="20" style="  display: flex;justify-content: space-between;"><el-space><el-col :span="6"><el-button @click="button1function" type="primary">button1</el-button></el-col><el-col :span="6"><el-button @click="button2function" type="primary">button2</el-button></el-col></el-space></el-row> 
</el-footer>//在<style>里加入以下代码
.align-bottom {display: flex;flex-direction: column;justify-content: flex-end;
}

解决效果

这篇关于Vue组件置底方法，ElementPlus布局的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---