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

solate

发布于 2021-12-16 10:08:03

1.9K0

发布于 2021-12-16 10:08:03

文章被收录于专栏：solate 杂货铺

原因

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

实现

不懂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;
}

完成效果