css gap form表单自适应换行

 

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

代码：

  html:

    

        
        
        search
    

 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;
    }