基于form的弹性布局
本帖最后由 不二如是 于 2020-3-17 19:01 编辑在实用Tips - 18 - 深扒“Flex” 布局我们科普了弹性布局。
结合最近小甲鱼老师Web课程刚好讲完form，所以来科普一个很使用的技巧。
（013 - 数据就应该整整齐齐（上））
我们构建一个空的表单form元素：
<form></form>
form元素是块级元素（独占一行），默认占据全部宽度，高度默认为0。
现在在form元素中添加两个常用的表单控件：
<input type="email" name="email">
<button type="submit">发射</button>
上面代码中，表单包含一个输入框（<input>）和一个按钮（<button>）。
根据标准，这两个元素也是行内块级元素（可以放在一行），也就是说，它们默认并排在一行上。
注意观察，默认的布局中浏览器为这两个元素进行了样式设置，中间的间隔就是。
为表单添加Flexbox布局样式设置：
<style>
form{
display: flex;
}
</style>
可以看到，两个元素之间的间隔消失了，因为弹性布局的项目（item）默认没有间隔。
在进行接下来flex-grow属性设置前，有两点注意：
**** Hidden Message *****
如果我们希望，输入框占据当前行的所有剩余宽度，只需要指定输入框的flex-grow属性为1：
input{
flex-grow: 1;
}
上图中，按钮的宽度没变，但是输入框变宽了，等于当前行的宽度减去按钮的宽度。
flex-grow属性默认等于0，即使用本来的宽度，不拉伸。
等于1时，就表示该项目宽度拉伸，占据当前行的所有剩余宽度。
align-self和align-items属性
上面我们理解了flex-grow属性的玩法，接下来把这两个属性掌握了那么离成功get不远了～
准备一张图片（可以自己找哈～）：
放在和index文件同级的img文件夹下，在button元素中加载：
<button type="submit"><img src="img/1.png" alt=""></button>
按钮插入图片后，它的高度变了，发生了一件很奇妙的事情。
弹性布局默认不改变项目的宽度，但是它默认改变项目的高度。
如果项目没有显式指定高度，就将占据容器的所有高度。
本例中，按钮变高了，导致表单元素也变高了，使得输入框的高度自动拉伸了。
align-self属性可以改变这种行为，修改input样式设置：
input{
flex-grow: 1;
align-self: center;
}
align-self属性可以取四个值：
flex-start：顶边对齐，高度不拉伸
flex-end：底边对齐，高度不拉伸
center：居中，高度不拉伸
stretch：默认值，高度自动拉伸
设置为flex-start：
设置为flex-end：
设置为stretch：
如果项目很多，一个个地设置align-self属性就很麻烦。
这时，可以在容器元素（本例为表单）设置align-items属性，它的值被所有子项目的align-self属性继承。
本例中就是设置父元素form：
form {
display: flex;
align-items: center;
}
http://xxx.fishc.com/forum/201803/20/101934b3igkgm9hgbgz0ck.gif
如果喜欢，别忘了评分{:10_281:} ：
http://xxx.fishc.com/forum/201709/19/094516hku92k2g4kefz8ms.gif
这位鱼油，如果喜欢本系列HTML帖子，请订阅 专辑☞（传送门）（不喜欢更要订阅{:10_278:} ） 学习 学习 {:10_257:} {:5_90:} 1 我来学习
{:5_90:} {:10_277:}
页:
[1]