Flexbox布局的最简单表单
作者：
⽇期：
弹性布局（Flexbox）逐渐流⾏，越来越多⼈使⽤，因为它写 CSS 布局真是太⽅便了。
三年前，我写过 Flexbox 的介绍（，），但是有些地⽅写得不清楚。今天，我看到⼀篇，才意识到⼀个最简单的表单，就可以解释Flexbox，⽽且内容还很实⽤。
下⾯，你只需要10分钟，就可以学会简单的表单布局。
⼀、<form> 元素
表单使⽤<form>元素。
<form></form>
上⾯是⼀个空表单。根据 HTML 标准，它是⼀个块级元素，默认将占据全部宽度，但是⾼度为0，因为没有任何内容。
⼆、表单控件
现在，加⼊两个最常⽤的表单控件。
<form>
<input type="email" name="email">
<button type="submit">Send</button>
flex布局对齐方式
</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>  <!-- a smiley icon -->  </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;
}
上⾯代码中，<form>元素设置了align-items以后，就不⽤在控件上设置align-self，除⾮希望两者的值不⼀样。
（完）

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。