搜索欄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%;
}

這個時候就現實正常了，但是還不完美，後續想到繼續修改