Flexbox 布局的最简单表单的实现

弹性布局（Flexbox）逐渐流行，越来越多人使用，因为它写 CSS 布局真是太方便了。

三年前，我写过 Flexbox 的介绍（上，下），但是有些地方写得不清楚。今天，我看到一篇 教程 ，才意识到一个最简单的表单，就可以解释 Flexbox，而且内容还很实用。

下面，你只需要10分钟，就可以学会简单的表单布局。

一、<form> 元素

表单使用

<form>

<form></form>

上面是一个空表单。根据 HTML 标准，它是一个块级元素，默认将占据全部宽度，但是高度为0，因为没有任何内容。

二、表单控件

现在，加入两个最常用的表单控件。

<form>
<input type="email" name="email">
<button type="submit">Send</button>
</form>

上面代码中，表单包含一个输入框（

<input>

<button>

根据标准，这两个控件都是行内块级元素（inline-block），也就是说，它们默认并排在一行上。

上图是浏览器对这个表单的默认渲染（颜色除外），可以看到，这两个控件之间有3像素～4像素的间隔，这是浏览器的内置样式指定的。

三、指定 Flexbox 布局

接着，指定表单使用 Flexbox 布局。

form {
display: flex;
}

可以看到，两个控件之间的间隔消失了，因为弹性布局的项目（item）默认没有间隔。

四、flex-grow 属性

两个地方值得注意。

（1）两个控件元素的宽度没有发生变化，因为弹性布局默认不改变项目的宽度。

（2）弹性布局默认左对齐，所以两个控件会从行首开始排列。

如果我们希望，输入框占据当前行的所有剩余宽度，只需要指定输入框的

flex-grow

1

input {
flex-grow: 1;
}

上图中，按钮的宽度没变，但是输入框变宽了，等于当前行的宽度减去按钮的宽度。