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

三年前，我寫過(guò) 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)闆](méi)有任何內(nèi)容。

二、表單控件

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

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

上面代碼中，表單包含一個(gè)輸入框（ <input> ）和一個(gè)按鈕（ <button> ）。

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

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

三、指定 Flexbox 布局

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

form  {
  display: flex;
}

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

四、flex-grow 屬性

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

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

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

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

input  {
  flex-grow: 1;
}

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

flex-grow 屬性默認(rèn)等于 0 ，即使用本來(lái)的寬度，不拉伸。等于 1 時(shí)，就表示該項(xiàng)目寬度拉伸，占據(jù)當(dāng)前行的所有剩余寬度。

五、align-items 屬性

我們做一點(diǎn)改變，在按鈕里面插入一張圖片。

<form action="#">
  <input type="email" placeholder="Enter your email">
  <button type="button"><svg>  <!-- a smiley icon -->  </svg></button>
</form>

按鈕插入圖片后，它的高度變了，變得更高了。這時(shí)，就發(fā)生了一件很奇妙的事情。

上圖中，按鈕變高了，輸入框也自動(dòng)變得一樣高了！

前面說(shuō)過(guò)， 彈性布局默認(rèn)不改變項(xiàng)目的寬度，但是它默認(rèn)改變項(xiàng)目的高度。如果項(xiàng)目沒(méi)有顯式指定高度，就將占據(jù)容器的所有高度。 本例中，按鈕變高了，導(dǎo)致表單元素也變高了，使得輸入框的高度自動(dòng)拉伸了。

align-items 屬性可以改變這種行為。

input {
  flex-grow: 1;
  align-self: center;
}

align-items 屬性可以取四個(gè)值。

• flex-start：頂邊對(duì)齊，高度不拉伸
• flex-end：底邊對(duì)齊，高度不拉伸
• center：居中，高度不拉伸
• stretch：默認(rèn)值，高度自動(dòng)拉伸

如果項(xiàng)目很多，一個(gè)個(gè)地設(shè)置align-self屬性就很麻煩。這時(shí)，可以在容器元素（本例為表單）設(shè)置align-items屬性，它的值被所有子項(xiàng)目的align-self屬性繼承。

form {
display: flex;
align-items: center;
}

上面代碼中， <form>元素設(shè)置了align-items以后，就不用在控件上設(shè)置align-self，除非希望兩者的值不一樣。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論