前端自学之路 ---- vue控件底部显示的方法（1）

本文链接：https://blog.csdn.net/qq_29194615/article/details/103558291

本文介绍了一种使用flex:1属性填充页面底部控件的布局技巧，通过示例代码展示了如何在不同颜色背景的div元素间应用此技巧，确保底部元素始终位于页面最下方。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

可使用flex:1来填充中间部分，使最下面的控件被
<div style="flex:1;"></div>

填充到最下面

例子如下：

<template>
    <div class="ssass-container">
            <div class="my_div" style="background-color: #07152a;margin-top: 40px">
                <text class="my_left_span">工器具总数</text>
                <text class="my_right_span">35</text>
            </div>
            <div class="my_div" style="background-color: #515a6e">
                <text class="my_left_span">合格设备</text>
                <text class="my_right_span">12</text>
            </div>
            <div class="my_div" style="background-color: #464c5b">
                <text class="my_left_span">使用中设备</text>
                <text class="my_right_span">15</text>
            </div>
            <div class="my_div" style="background-color: #f38c00">
                <text class="my_left_span">待检设备</text>
                <text class="my_right_span">5</text>
            </div>
            <div class="my_div" style="background-color: #00B4FF">
                <text class="my_left_span">超时未归还</text>
                <text class="my_right_span">2</text>
            </div>
            <div class="my_div" style="background-color: #b3ff20">
                <text class="my_left_span">超时未报废</text>
                <text class="my_right_span">1</text>
            </div>
            <div class="my_div" style="background-color: #31708f" @click="getLog">
                <text class="my_left_span">盘点记录</text>
                <text class="my_right_span">2</text>
            </div>

        <div style="flex:1;"></div>
            <div class="my_bottom_div">
                <text style="color: #00B4FF;font-size: 30px">工器具入库</text>
                <hy-image src="/image/hehe.png" width="50px" height="50px"></hy-image>
            </div>
    </div>

</template>

<style lang="scss" src="../css/hyweex.scss"></style>
<script>

    export default {
        name: "ssass",
        data() {
            return {}
        },
        methods: {
            getLog() {
                console.log("response,response.body"),
                    this.$toast("盘点记录"),
                    this.$router.push({path: '/views/my_app'})
            },
            postLogin: function () {
                var url = "http://127.0.0.1:3000/postLogin";
                this.https.post(url, {
                    username: 'lisi',
                    password: 'lisadsafi'
                }, {emulateJSON: true}).then(function (response) {
                    console.log(response, response.body)
                })
            }
        }
    }
</script>

<style scoped lang="less">
    .my_button {
        width: max-content;
        height: 130px;
    }

    .ssass-container {
        display: flex;
        flex-direction: column;
        padding: 20px;

    }
    .my_div {
        display: flex;
        padding-left: 30px;
        padding-right: 30px;
        padding-bottom: 50px;
        padding-top: 50px;
        margin-top: -20px;
        flex-direction: row;
        justify-content: space-between;
        border-radius: 10px 10px 10px 10px;
    }

    .my_bottom_div {
        display: flex;
        height: 130px;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        background: rgba(255, 255, 255, 1);
        box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.16);
        border-radius: 4px;
    }
    .my_left_span {
        font-size: 30px;
        color: white;
        display: inline-block !important;
        text-indent: 20px;
    }

    .my_right_span {
        font-size: 30px;
        padding-right: 20px;
        display: inline-block !important;
        color: white;
    }
</style>