使用sass实现查询区域表单响应式布局

技术栈：vue+iview

曾经有一个列表页面，设计师同学要求对查询区域表单进行布局，要求如下：

1. 查询区域表单响应式布局，右侧尾部到容易有边框的距离为0

2. 根据分辨率大小控制每行展示的数量

3. 多行时，查询按钮与上一行的输入框左侧对齐

4. 单行时，查询按钮直接跟在最后一个输入框的后面

本来想采用iview的栅格布局的，但是看了一下第四点要求，于是还是决定自己写样式，哈哈哈，下面上代码~

template:

注意：表单的 label-width 必须保持一致，否则折行后会对不齐

<Form inline :label-width="70" :rules="queryValidate" class="query-form-box">
          <FormItem label="下拉：" prop="brandCode">
            <Select >
              <Option>全部</Option>
            </Select>
          </FormItem>
          <FormItem label="下拉：" prop="brandCode">
            <Select >
              <Option>全部</Option>
            </Select>
          </FormItem>
          <FormItem label="输入框：" prop="code">
            <Input clearable placeholder="请输入"></Input>
          </FormItem>
           <FormItem label="输入框：" prop="code">
            <Input clearable placeholder="请输入"></Input>
          </FormItem>
           <FormItem label="输入框：" prop="code">
            <Input clearable placeholder="请输入"></Input>
          </FormItem>
           <FormItem label="输入框：" prop="code">
            <Input clearable placeholder="请输入"></Input>
          </FormItem>
           <FormItem label="输入框：" prop="code">
            <Input clearable placeholder="请输入"></Input>
          </FormItem>
          <FormItem class="query-btns-box form-item-order-8">
            <Button type="primary">查询</Button>
            <Button style="margin-left: 10px">重置</Button>
          </FormItem>
        </Form>

scss:

主要还是使用媒体查询+flex的方案，针对上述第四点要求，我的思路是：给按钮所在的 form-item 进行编号；当按钮的编号小于等于列数时，则表示按钮当前在第一行，此时去掉其左边距，就OK了

/* ------- start 所有列表页面查询表单响应式布局 ------- */ 
.query-form-box {
  display: flex;
  flex-flow: row wrap;

  .ivu-form-item {
    padding-right: 15px;
    margin-right: 0 !important;
  }

  // 查询按钮
  .query-btns-box {
    margin-bottom: 12px;
  }
}
.query-form-box.ivu-form.ivu-form-inline .ivu-select, 
.query-form-box.ivu-form.ivu-form-inline .ivu-input-wrapper {
  width: 100% !important;
}


// $columns： 查询表单的列数 
@mixin queryFormLayout($columns: 4) {
  .query-form-box {
    .ivu-form-item {
      width: (100% / $columns);
      &:nth-child(#{$columns}n) {
        padding-right: 0;
      }
    }
    
    // @@备注：！！若查询表单只有一行，则按钮直接跟在输入框后面，不用和上方输入框对齐，因此需要清除左边距
    @for $i from 1 through $columns {
      @if $i <= $columns {
        .form-item-order-#{$i} { 
          .ivu-form-item-content {
            margin-left: 0 !important;
          }
        }
      }
    }
  }
}

@media screen and (max-width: 1200px) {
  @include queryFormLayout(3)
}

@media screen and (min-width: 1201px) and (max-width: 1399px) {
  @include queryFormLayout(4)
}

@media screen and (min-width: 1400px) and (max-width: 1799px) {
  @include queryFormLayout(5)
}

@media screen and (min-width: 1800px){
  @include queryFormLayout(6)
}
/* ------- end 所有列表页面查询表单响应式布局 ------- */ 

上述方式已经能实现设计师妹妹的要求了，但是肯定还不是最优解决方案，希望能有幸得到各位大神指点~