技术栈：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 所有列表页面查询表单响应式布局 ------- */
上述方式已经能实现设计师妹妹的要求了，但是肯定还不是最优解决方案，希望能有幸得到各位大神指点~
