彈性佈局（Flexbox）逐漸流行，越來越多人使用，因爲它寫 CSS 佈局真是太方便了。
三年前，我寫過 Flexbox 的介紹（上，下），但是有些地方寫得不清楚。今天，我看到一篇教程，才意識到一個最簡單的表單，就可以解釋 Flexbox，而且內容還很實用。
下面，你只需要10分鐘，就可以學會簡單的表單佈局。
一、<form> 元素
表單使用<form>元素。
<form></form>
上面是一個空表單。根據 HTML 標準，它是一個塊級元素，默認將佔據全部寬度，但是高度爲0，因爲沒有任何內容。
二、表單控件
現在，加入兩個最常用的表單控件。
<form>
<input type="email" name="email">
<button type="submit">Send</button>
</form>
上面代碼中，表單包含一個輸入框（<input>）和一個按鈕（<button>）。
根據標準，這兩個控件都是行內塊級元素（inline-block），也就是說，它們默認並排在一行上。
上圖是瀏覽器對這個表單的默認渲染（顏色除外），可以看到，這兩個控件之間有3像素～4像素的間隔，這是瀏覽器的內置樣式指定的。
順便給大家推薦一個裙，它的前面是 537，中間是631，最後就是 707。想要學習前端的小夥伴可以加入我們一起學習，互相幫助。羣裏每天晚上都有大神免費直播上課，如果不是想學習的小夥伴就不要加啦。（537-631-707）
三、指定 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，除非希望兩者的值不一樣。
作者：阮一峯