技術(shù)棧：vue+iview

曾經(jīng)有一個列表頁面，設(shè)計師同學(xué)要求對查詢區(qū)域表單進(jìn)行布局，要求如下：

1. 查詢區(qū)域表單響應(yīng)式布局，右側(cè)尾部到容易有邊框的距離為0

2. 根據(jù)分辨率大小控制每行展示的數(shù)量

3. 多行時，查詢按鈕與上一行的輸入框左側(cè)對齊

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 進(jìn)行編號；當(dāng)按鈕的編號小于等于列數(shù)時，則表示按鈕當(dāng)前在第一行，此時去掉其左邊距，就OK了

/* ------- start 所有列表頁面查詢表單響應(yīng)式布局 ------- */ 
.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： 查詢表單的列數(shù) 
@mixin queryFormLayout($columns: 4) {
  .query-form-box {
    .ivu-form-item {
      width: (100% / $columns);
      &:nth-child(#{$columns}n) {
        padding-right: 0;
      }
    }
    
    // @@備注：！！若查詢表單只有一行，則按鈕直接跟在輸入框后面，不用和上方輸入框?qū)R，因此需要清除左邊距
    @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 所有列表頁面查詢表單響應(yīng)式布局 ------- */ 

上述方式已經(jīng)能實現(xiàn)設(shè)計師妹妹的要求了，但是肯定還不是最優(yōu)解決方案，希望能有幸得到各位大神指點~