html - 如何使用 Flexbox 将表单拉伸(stretch)成水平 div？

Question

假设我们有一个带有输入和按钮元素的标准表单，如下例所示。我们如何使用 CSS Flexbox 水平和响应式拉伸(stretch)这个表单？

<div>
    <form class="sampleform" onSubmit={this.onSubmit}>
        <input
            type="text"
            class="input-text"
            name="sampleinput"
            placeholder="A placeholder ..."
        />
        <button
            type="submit"
            class="button"
        >➕
        </button>
    </form>
</div>

Answer 1

像这样:

form {
  display: flex;
}
input {
  width: 100%;
}

<div>
   <form class="sampleform" onSubmit={this.onSubmit}>
       <input
            type="text"
            class="input-text"
            name="sampleinput"
            placeholder="A placeholder ..."
        />
        <button
             type="submit"
             class="button"
         >➕
         </button>
     </form>
</div>