CSS——flex弹性布局

创建表单，加入常用的表单控件

<form>
    <input type="email" name='email'>
    <button type="submit">提交</button>
</form>

两个空间都是行内快元素，默认会排列在一行，浏览器在渲染的时候会带有默认的间隔，使用flex布局可以清除控件之间的间隔

form{
    display: flex;/*设置表单为弹性布局*/
}

如果我们希望指定的控件可以占据所在行的所有剩余空间，可以拉伸该控件

input{
    flex-grow: 1; /*默认为0，不拉伸；设置为1，拉伸宽度*/
}

弹性布局不改变容器的宽度，但是会改变容器的高度，当我们在button中插入一张图片时，input控件的高度也会随之改变

<form>
    <input type="email" name='email'>
    <button type="submit"><img src="../../build/logo.png"></button>
</form>

在控件中使用align-self可以改变这一行为

input{
    flex-grow: 1; /*默认为0，不拉伸；设置为1，拉伸宽度*/
    align-self: center; /*flex-start在上面 flex-end在下面 center在中间 stretch为拉伸高度（默认）*/
}

如果想设置整个容器元素的align-iself值，可以在容器中使用align-item值

form{
    display: flex;/*设置表单为弹性布局*/
    align-items: center;/*设置全部的元素align-self为center*/
}