移动端flex布局以及和float布局的对比

还是这张设计稿

效果图如下

html

flex布局也称为弹性布局，非常容易上手。
在flex布局中我搜索栏最外层div加上了padding，但是没有出现横向滚动条，是因为在flex布局中，他将容器自动撑满整个div，div宽度会等于容器的总宽度，即16+359=375px。

同时，flex的垂直居中非常容易实现，在父元素中加一个 align-item：center即可。
再者使flex布局中，两列、三列的布局可以用justify-content非常容易地实现，左对齐右对齐平均分布等等。
详细使用方法网上好的博客非常多，我这里不再赘述。
但是他的浏览器兼容性比较差，建议同时也学习float布局

flex布局的缺点

<div class="top-outer">
        <input placeholder="请输入学号查询状态">
        <button>搜索</button>
    </div>
    <form>
        <div class="title">
            学生信息
        </div>
        <div class="input-outer">
            <div style="display: flex">
                <input placeholder="请输入学号" class="input-inline" name="userNumber">
                <input placeholder="请输入姓名" class="input-inline" name="userName">
            </div>
            <div style="display: flex">
                <input placeholder="请输入专业班级" class="input-inline" name="userClass onclick="emptyData(3)" onblur="fillData(3)">
                <input placeholder="请输入联系方式" class="input-inline" name="userPhone">
            </div>
        </div>
        <div class="title">
            指导老师
        </div>
        <div class="input-outer">
            <div style="display: flex">
                <input placeholder="请输入指导老师姓名" class="input-inline" name="userTeacher" onclick="emptyData(5)" onblur="fillData(5)">
            </div>
        </div>
        <div class="title">
            预约时间
        </div>
        <div class="select-outer">
            <select name="month">
                <option value="1">1月</option>
                <option value="2">2月</option>
                <option value="3">3月</option>
            </select>
            <select name="date">
                <option value="1">1日</option>
                <option value="2">2日</option>
                <option value="3">3日</option>
            </select>
            <select name="time">
                <option value="0">早上</option>
                <option value="1">中午</option>
                <option value="2">晚上</option>
            </select>
        </div>
        <div style="display: flex;padding: 0.32rem">
            <input class="submit-btn" type="submit" value="提交信息">
        </div>
    </form>

css样式

*{
    margin: 0;
    padding: 0;
    background-color: #f6f6f8;
}
input{
    border: 0;
}
button{
    border: 0;
}
.top-outer{
    background: linear-gradient(to right,#5D81F6,#98AEF6);
    height: 1rem;
    align-items: center;
    display: flex;
    padding-left: 0.32rem;
}

.top-outer input{
    height: 0.64rem;
    line-height: 0.64rem;
    border-radius: 0.32rem;
    color: #5e5e5e;
    font-size: 14px;
    padding-left: 0.16rem;
    width: 5.84rem;
}

.top-outer button{
    background-color: rgba(00,00,00,0);
    font-size: 12px;
    color: white;
    font-weight: bold;
    width: 1.18rem;
}

.title{
    font-size: 0.2rem;
    margin: 0.16rem 0.32rem;
    font-weight: bold;
}

.input-outer{
    width: 100%;
    align-items: center;
}

.input-inline{
    font-size: 0.28rem;
    color: #5e5e5e;
    height: 0.64rem;
    background-color: white;
    border: rgba(00,00,00,0);
    border-radius: 0.32rem;
    width: 50%;
    padding-left: 0.24rem;
    margin: 0.1rem;
}

.select-outer{
    display: flex;
    padding: 0 0.32rem;
    justify-content: space-between;
    font-size: 14px;
    color: #5e5e5e;
    line-height: 0.64rem;
}

.select-outer select{
    width: 30%;
    text-align: center;
    border: 0;
    border-radius: 0.24rem;
    background-color: white;
    height: 0.64rem;
    padding-left: 0.24rem;
    margin: 0.1rem 0;
}

.submit-btn{
    background:linear-gradient(to right,#5D81F6,#98AEF6);
    height: 0.64rem;
    width: 100%;
    border-radius: 0.35rem;
    color: white;
    font-weight: bold;
    letter-spacing:0.3rem
}

来源：https://blog.csdn.net/qq_42039588/article/details/100983495