flex布局中独占一行

 

 

在移动端的flex布局中，会将所有组件都全部挤在一行，很多时候希望能够达到float布局的效果，当其宽度超出后就换行

    设置宽度为100%并不能达到想要的效果

.bStuname .userinput{
    flex-direction: column;
    width: 100%;
}

需要在其父组件开启flex-wrap:才能达到分层的效果

.bStuname{
    display: flex;
    flex-wrap: wrap;
    margin-left: .33rem;
    margin-top: 0.66rem;
}

<template>
    <div class="bStu">
        <div class="bStutop">
            <img :src="url" alt="">
            <div class="bStuname">
                <h2>{{this.$store.state.username}}</h2>
            </div>
        </div>

        <div class="bStuBody">
            <div class="bStuContent">
                <div class="bStuInfo">
                    <h2>学号</h2>
                    <input type="text" v-model="stuid">
                </div>
            </div>
            <div class="bStuContent">
                <div class="bStuInfo">
                    <h2>宿舍号</h2>
                    <input type="text" v-model="roomid">
                </div>
            </div>

            <van-button type="primary" @click="submitinfo">更改信息</van-button>
        </div>

    </div>
</template>

<script>
export default {
    name:'bland',
    data() {
        return {
            url:'',
            username:'',
            isinput:false,
            roomid:'',
            stuid:''
        }
    },
    methods: {
        changeUsername(){
            this.isinput = !this.isinput
        },
        submitinfo(){
            this.$axios({
                method:'post',
                url:'/student/bland/updateinfo',
                data:{
                    user:this.username,
                    roomid:this.roomid,
                    stuid:this.stuid
                }
            }).then((res)=>{
                this.$router.push('/student/studentview/delcharge')
            })
        }
    },
    mounted() {
        this.url = this.$store.state.url
        // console.log(this.url)
        this.username = this.$store.state.username

        this.$axios({
            method:'get',
            url:'/student/bland/start',
            params:{
                user:this.username
            }
        }).then(res=>{
            this.roomid = res.data[0].roomid
            this.stuid = res.data[0].stuid
        })

    },
}

</script>
<style>
@import url('../../../assets/css/reset.css');
@import url('../../../assets/css/student/user/bland.css');
</style>

完整界面代码，其效果修改用户信息