彈性布局（Flexbox）逐漸流行，越來(lái)越多人使用，因?yàn)樗鼘?CSS 布局真是太方便了。

三年前，我寫過 Flexbox 的介紹（上，下），但是有些地方寫得不清楚。今天，我看到一篇 教程 ，才意識(shí)到一個(gè)最簡(jiǎn)單的表單，就可以解釋 Flexbox，而且內(nèi)容還很實(shí)用。

下面，你只需要10分鐘，就可以學(xué)會(huì)簡(jiǎn)單的表單布局。

一、<form> 元素

表單使用

<form>

<form></form>

上面是一個(gè)空表單。根據(jù) HTML 標(biāo)準(zhǔn)，它是一個(gè)塊級(jí)元素，默認(rèn)將占據(jù)全部寬度，但是高度為0，因?yàn)闆]有任何內(nèi)容。

二、表單控件

現(xiàn)在，加入兩個(gè)最常用的表單控件。

<form>
<input type="email" name="email">
<button type="submit">Send</button>
</form>

上面代碼中，表單包含一個(gè)輸入框（

<input>

<button>

根據(jù)標(biāo)準(zhǔn)，這兩個(gè)控件都是行內(nèi)塊級(jí)元素（inline-block），也就是說，它們默認(rèn)并排在一行上。

上圖是瀏覽器對(duì)這個(gè)表單的默認(rèn)渲染（顏色除外），可以看到，這兩個(gè)控件之間有3像素～4像素的間隔，這是瀏覽器的內(nèi)置樣式指定的。

三、指定 Flexbox 布局

接著，指定表單使用 Flexbox 布局。

form {
display: flex;
}

可以看到，兩個(gè)控件之間的間隔消失了，因?yàn)閺椥圆季值捻?xiàng)目（item）默認(rèn)沒有間隔。

四、flex-grow 屬性

兩個(gè)地方值得注意。

（1）兩個(gè)控件元素的寬度沒有發(fā)生變化，因?yàn)閺椥圆季帜J(rèn)不改變項(xiàng)目的寬度。

（2）彈性布局默認(rèn)左對(duì)齊，所以兩個(gè)控件會(huì)從行首開始排列。

如果我們希望，輸入框占據(jù)當(dāng)前行的所有剩余寬度，只需要指定輸入框的

flex-grow

1

input {
flex-grow: 1;
}

上圖中，按鈕的寬度沒變，但是輸入框變寬了，等于當(dāng)前行的寬度減去按鈕的寬度。