表单布局首选Flexbox，简单超乎你的想象！

弹性规划（Flexbox）逐步盛行，越来越多人运用，由于它写 CSS 规划真是太便当了。

今天，我看到一篇教程才认识到一个最简单的表单，就能够解释 Flexbox，而且内容还很适用。

下面，你只需求10分钟，就能够学会简单的表单规划。

一、

元素

表单运用元素。

 <form>form> 

上面是一个空表单。依据 HTML 规范，它是一个块级元素，默许将占领全部宽度，但是高度为0，由于没有任何内容。

二、表单控件

如今，参加两个最常用的表单控件。

 <form> <input type="email" name="email"> <button type="submit">Sendbutton> form> 

上面代码中，表单包含一个输入框（input）和一个按钮（button）。

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

上图是阅读器对这个表单的默许渲染（颜色除外），能够看到，这两个控件之间有3像素～4像素的距离，这是阅读器的内置款式指定的。

三、指定 Flexbox 规划

接着，指定表单运用 Flexbox 规划。

 form { display: flex; } 

能够看到，两个控件之间的距离消逝了，由于弹性规划的项目（item）默许没有距离。

四、flex-grow 属性

两个中央值得留意。

（1）两个控件元素的宽度没有发作变化，由于弹性规划默许不改动项目的宽度。

（2）弹性规划默许左对齐，所以两个控件会从行首开端排列。

假如我们希望，输入框占领当前行的一切剩余宽度，只需求指定输入框的flex-grow属性为1。

 input { flex-grow: 1; } 

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

flex-grow属性默许等于0，即便用原本的宽度，不拉伸。等于1时，就表示该项目宽度拉伸，占领当前行的一切剩余宽度。

五、align-self 属性和 align-items 属性

我们做一点改动，在按钮里面插入一张图片。

 <form action="#"> <input type="email" placeholder="Enter your email"> <button type="button"><svg>  svg>button> form> 

按钮插入图片后，它的高度变了，变得更高了。这时，就发作了一件很巧妙的事情。

上图中，按钮变高了，输入框也自动变得一样高了！

前面说过，弹性规划默许不改动项目的宽度，但是它默许改动项目的高度。假如项目没有显式指定高度，就将占领容器的一切高度。 本例中，按钮变高了，招致表单元素也变高了，使得输入框的高度自动拉伸了。

align-self属性能够改动这种行为。

 input { flex-grow: 1; align-self: center; } 

align-self属性能够取四个值。

• flex-start：顶边对齐，高度不拉伸
• flex-end：底边对齐，高度不拉伸
• center：居中，高度不拉伸
• stretch：默许值，高度自动拉伸

假如项目很多，一个个地设置align-self属性就很费事。这时，能够在容器元素（本例为表单）设置align-items属性，它的值被一切子项目的align-self属性继承。

 form { display: flex; align-items: center; } 

上面代码中，元素设置了align-items以后，就不用在控件上设置align-self，除非希望两者的值不一样。

（完）