css gap form表单自适应换行

白聿冉

已于 2023-05-16 21:55:41 修改

阅读量177

点赞数

分类专栏： CSS 文章标签： css 前端 javascript

于 2023-05-16 21:50:23 首次发布

本文链接：https://blog.csdn.net/Alone_Endeavor/article/details/130714779

版权

CSS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

可在不同宽度情况下css可对宽度进行计算，从而进行自适应布局：

代码：

html:

    <form>
        <input type="text" class="username">
        <input type="text" class="password">
        <button>search</button>
    </form>

css:

    form{
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        border: 1px solid #ccc;
        padding: 20px;
    }

    .username{
        flex: 1 0 180px;
    }

    .password{
        flex: 1 0 180px;
    }

    button{
        flex: 1 0 140px;
    }