如何實現一個搜索框，按鈕寬度固定，input的寬度自適應

如何實現一個搜索框，按鈕寬度固定，input的寬度自適應

方法 1

利用flex-grow讓input填充剩餘空間

<div>
    <input>
    <button type="button">搜索</button>
</div>

div{
  display: flex;
}
button{
  width:100px;
}
input{
  flex-grow: 1;
}

方法2

同樣使用flex佈局，給input設置width:100%；給button設置固定寬度同樣可以讓Input填充剩餘空間，而且不會讓button換行

<div>
    <input>
    <button type="button">搜索</button>
</div>

div{
  display: flex;
  border: 1px solid red;
}
button{
  width:100px;
}
input{
  width: 100%;
}

方法3

使用grid佈局，讓Input列自動撐開，給button列固定寬度

<div>
    <input>
    <button type="button">搜索</button>
</div>

div{
  border: 1px solid red;
  display: grid;
  grid-template-columns: auto 100px;
}