彈性布局（Flexbox）逐漸流行，越來越多人使用，因為它寫 CSS 布局真是太方便了。

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

下面，你只需要10分鐘，就可以學會簡單的表單布局。

一、<form> 元素

表單使用 <form> 元素。

<form></form>

上面是一個空表單。根據(jù) HTML 標準，它是一個塊級元素，默認將占據(jù)全部寬度，但是高度為0，因為沒有任何內(nèi)容。

二、表單控件

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

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

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

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

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

三、指定 Flexbox 布局

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

form  {
  display: flex;
}

可以看到，兩個控件之間的間隔消失了，因為彈性布局的項目（item）默認沒有間隔。

四、flex-grow 屬性

兩個地方值得注意。

（1）兩個控件元素的寬度沒有發(fā)生變化，因為彈性布局默認不改變項目的寬度。

（2）彈性布局默認左對齊，所以兩個控件會從行首開始排列。

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

input  {
  flex-grow: 1;
}

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

flex-grow 屬性默認等于 0 ，即使用本來的寬度，不拉伸。等于 1 時，就表示該項目寬度拉伸，占據(jù)當前行的所有剩余寬度。

五、align-items 屬性

我們做一點改變，在按鈕里面插入一張圖片。

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

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

上圖中，按鈕變高了，輸入框也自動變得一樣高了！

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

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

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

align-items 屬性可以取四個值。

• flex-start：頂邊對齊，高度不拉伸
• flex-end：底邊對齊，高度不拉伸
• center：居中，高度不拉伸
• stretch：默認值，高度自動拉伸

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

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

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

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

最新評論