Flexbox 最简单的表单

弹性布局(Flexbox)逐渐流行，愈来愈多的人开始使用，由于它写Css布局真是太简单了一

1、<form>元素

表单使用<form>元素

<form></form>复制代码

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

2、表单控件

如今加入两个表单控件

<form>
    <input type="email" name="email"/>
    <button type="submit">Send</button>
<form>复制代码

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

根据HTML标准，这两个都是行内块级元素(inline-block)，也就是说它们默认是在一行显示的。

上图是浏览器对这个表单默认渲染(颜色除外),能够看到，这个两个控件之间有3像素~4像素的间隔，这是浏览器的内置样式指定的。

3、指定的Flexbox布局

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

form {
    display: flex;
}复制代码

这时在浏览器中能够看到两个控件之间的间距消失了。由于弹性布局的项目(item)默认没有间距。

4、flex-grow属性

两个地方值得注意：

1.两个控件元素的宽度没有发生变化，由于弹性布局不会改变项目的宽度。

2.弹性布局默认左对齐，因此两个控件会从行首开始排列。

若是咱们但愿，输入框占据当前行剩余的宽度，值须要指定输入框的flex-grow属性为1。

input {
    flex-grow: 1;
}复制代码

这时在浏览器中能够看到，按钮的宽度没有发生变化，可是输入框变宽了，等于当前行的宽度减去按钮的宽度。

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

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

咱们作一点改变，在按钮里面插入一张图片。

<form action="#">
    <input type="email" name="email" />
    <button type="submit"><svg>  <!-- a smiley icon -->  </svg></button>
</form>复制代码

按钮插入图片后，它的高度发生了变化，变得更高了，这时候发生了一个奇妙的事情。

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

前面说过，弹性布局默认不会改变项目的宽高，可是它默认改变项目的高度，若是项目没有显示指定高度，就将占据容器的全部高度，本例中，按钮变高了，致使表单元素也变高了，使得输入框的高度自动拉伸了。

align-self属性能够改变这个行为。

input {
    flex-grow: 1;
    align-self: center;
}复制代码

align-self 属性可取的四个值：

1.flex-start：顶边对齐，高度不拉伸

2.flex-end：底边对齐，高度不拉伸

3.center：居中，高度不拉伸

4.stretch：默认值，高度自动拉伸

若是项目不少，一个个地设置align-self属性很麻烦，这时能够在容器元素(本例是表单)设置align-items属性，它的值被全部子项目的align-self属性继承。

form {
    display: flex;
    align-items: center;
}复制代码

上面代码中，<form>元素设置了align-items之后，就不用在控件上设置align-self，除非但愿二者的值不同。

转载：http://www.ruanyifeng.com/blog/2018/10/flexbox-form.html