html - 如何使用 Flexbox 将表单拉伸为水平 div？

Question

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

<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>

标签： htmlcssflexbox

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>