搜索栏flex布局自动换行，最后元素靠右

原因

在写后端管理时碰到需要写很多条件的搜索，这个时候需要自动换行，但是最后按钮必须靠右，这个时候就可以使用这个。

实现

不懂flex 的可以参考这篇

阮一峰 Flex 布局教程：语法篇

最后一个元素靠右主要需要设置 margin-left:auto

html

   <div style="width: 600px; height: 300px; border: solid 1px black ">
      <div class="search">
        <div class="search-item">
          <span class="search-item-title">标题头</span>
          <input type="text" class="search-item-form" placeholder="请输入">
        </div>
        <div class="search-item">
          <span class="search-item-title">标题头</span>
          <input type="text" class="search-item-form" placeholder="请输入">
        </div>
        <div class="search-item">
          <span class="search-item-title">标题头</span>
          <input type="text" class="search-item-form" placeholder="请输入">
        </div>
        <div class="search-item-end">
          <input type="submit" value="提交" />
          <input type="submit" value="还原" />
        </div>
      </div>
    </div>

css:

.search {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  /*flex-direction: row;*/
  justify-content: flex-start;
}
.search-item {
  margin-right: 10px;
}
.search-item-title {
  margin-right: 5px;
  font-size: 16px;
}
.search-item-form {
  max-width: 300px;
}
.search-item-end {
  margin-left: auto;
}

完成效果

其他组件

在使用element等第三方库，form表单width: 100%, 导致文字会位于form上面

这个时候需要在item中设置 display: inline-flex; 将元素改为行元素。

但是title会被压缩换行， 暂时想到的方法是给title设置一个长度 width: 25%

.search-item {
  margin-right: 10px;
  display: inline-flex;
  align-items: center;
}
.search-item-title {
  margin-right: 5px;
  font-size: 16px;
  min-width: 25%;
}

这个时候就现实正常了，但是还不完美，后续想到继续修改