自适应 Searchform 方案

项目中经常会有搜索，列表等功能， 一套自适应布局的搜索方案，

几种场景分析： 大容器： 设置 flex 布局， 允许换行折叠展示

.container{
    display:flex;
    flex-wrap: wrap;
}

一栏 24 ，搜索框自身正好布满一整行， 此时，搜索操作框需另起一行，右对齐 操作框另一起行的样式设置

.search-box{
    display: flex;
    justify-content: flex-end; // 居右对齐
}

搜索框自身布局完后，最后一行仍有空间， 此时将搜索操作框紧跟当前最后一行，右对齐 操作框紧跟其后样式设置

.search-box-behind{
    display:flex;
    align-item: center;
    justify-content: center;
    flex: 1; // 自动填充剩余空间
    margin-bottom: 12px; // 将底部剩余空间填充 - 主要是兼容 field， 让整个垂直居中
}

每个搜索框设置

.field-cont{
    padding-right: 8px; // 与右边保持距离
    box-sizing: "border-box"; // 将 padding 包含再宽度设置中
    width: col ? col/24 * 100% : width // 若设了 col, 则以 col 为准， 否则以 width 为准
}
<div class="field-cont">
    // props 为 field 相关的属性
    <Field {...props}/>
</div>

整个布局

<FormProvider form={form}>
    // layoutProps 是 layout 相关属性
    <FormLayout feedbackLayout="terse" {...layoutProps}></FormLayout>
</FormProvider>