基于form的弹性布局

不二如是

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

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

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

1. <form></form>

复制代码

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

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

1. <input type="email" name="email">
   
2.     <button type="submit">发射</button>

复制代码

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

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

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

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

1. <style>
   
2.         form{
   
3.             display: flex;
   
4.         }
   
5.     </style>

复制代码

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

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

游客，如果您要查看本帖隐藏内容请回复

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

1.   input{
   
2.             flex-grow: 1;
   
3.         }

复制代码

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

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

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

---

align-self和align-items属性

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

准备一张图片（可以自己找哈～）： 1.zip (12.42 KB, 下载次数: 1, 售价: 2 鱼币)

2018-10-29 11:03 上传

点击文件名下载附件

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

1. <button type="submit"><img src="img/1.png" alt=""></button>

复制代码

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

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

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

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

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

1.         input{
   
2.             flex-grow: 1;
   
3.             align-self: center;
   
4.         }

复制代码

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

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

设置为flex-start：

设置为flex-end：

设置为stretch：

如果项目很多，一个个地设置align-self属性就很麻烦。

这时，可以在容器元素（本例为表单）设置align-items属性，它的值被所有子项目的align-self属性继承。

本例中就是设置父元素form：

1. form {
   
2.   display: flex;
   
3.   align-items: center;
   
4. }

复制代码

---

                               
登录/注册后可看大图

如果喜欢，别忘了评分 ：

                               
登录/注册后可看大图

这位鱼油，如果喜欢本系列HTML帖子，请订阅 专辑&#9758;（传送门）（不喜欢更要订阅 ）

xiao9798

学习 学习

Qmh

讨债仔

小山羊驾到

1

LJYUYU

我来学习

tg123

tianyuan