实用Tips - 39 - 基于form的弹性布局

登录/注册后可看大图

在实用Tips - 18 - 深扒“Flex” 布局我们科普了弹性布局。

结合最近小甲鱼老师Web课程刚好讲完form，所以来科普一个很使用的技巧。
（013 - 数据就应该整整齐齐（上））

我们构建一个空的表单form元素：

form元素是块级元素（独占一行），默认占据全部宽度，高度默认为0。

现在在form元素中添加两个常用的表单控件：

发射

登录/注册后可看大图

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

根据标准，这两个元素也是行内块级元素（可以放在一行），也就是说，它们默认并排在一行上。

注意观察，默认的布局中浏览器为这两个元素进行了样式设置，中间的间隔就是。

为表单添加Flexbox布局样式设置：

form{
display: flex;
}

登录/注册后可看大图

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

在进行接下来flex-grow属性设置前，有两点注意：

如果我们希望，输入框占据当前行的所有剩余宽度，只需要指定输入框的flex-grow属性为1：

input{
flex-grow: 1; }

登录/注册后可看大图

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

flex-grow属性默认等于0，即使用本来的宽度，不拉伸。

等于1时，就表示该项目宽度拉伸，占据当前行的所有剩余宽度。

align-self和align-items属性

上面我们理解了flex-grow属性的玩法，接下来把这两个属性掌握了那么离成功get不远了～

准备一张图片（可以自己找哈～）：

1.zip

放在和index文件同级的img文件夹下，在button元素中加载：

登录/注册后可看大图

按钮插入图片后，它的高度变了，发生了一件很奇妙的事情。

弹性布局默认不改变项目的宽度，但是它默认改变项目的高度。

如果项目没有显式指定高度，就将占据容器的所有高度。

本例中，按钮变高了，导致表单元素也变高了，使得输入框的高度自动拉伸了。

align-self属性可以改变这种行为，修改input样式设置：

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

登录/注册后可看大图

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