建立表單，加入常用的表單控制元件

<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*/
}