Flexbox 最簡單的表單

彈性佈局(Flexbox)逐漸流行，愈來愈多的人開始使用，由於它寫Css佈局真是太簡單了一

1、<form>元素

表單使用<form>元素

<form></form>複製代碼

上面是一個空的表單，根據HTML標準，它是一個塊級元素，默認將佔據整個寬度。高度爲0，由於內部沒有任何的內容。

2、表單控件

如今加入兩個表單控件

<form>
    <input type="email" name="email"/>
    <button type="submit">Send</button>
<form>複製代碼

上面代碼中，表單包含一個輸入框(input)和一個按鈕(button)

根據HTML標準，這兩個都是行內塊級元素(inline-block)，也就是說它們默認是在一行顯示的。

上圖是瀏覽器對這個表單默認渲染(顏色除外),能夠看到，這個兩個控件之間有3像素~4像素的間隔，這是瀏覽器的內置樣式指定的。

3、指定的Flexbox佈局

接着，指定表單使用Flexbox佈局

form {
    display: flex;
}複製代碼

這時在瀏覽器中能夠看到兩個控件之間的間距消失了。由於彈性佈局的項目(item)默認沒有間距。

4、flex-grow屬性

兩個地方值得注意：

1.兩個控件元素的寬度沒有發生變化，由於彈性佈局不會改變項目的寬度。

2.彈性佈局默認左對齊，因此兩個控件會從行首開始排列。

若是咱們但願，輸入框佔據當前行剩餘的寬度，值須要指定輸入框的flex-grow屬性爲1。

input {
    flex-grow: 1;
}複製代碼

這時在瀏覽器中能夠看到，按鈕的寬度沒有發生變化，可是輸入框變寬了，等於當前行的寬度減去按鈕的寬度。

flex-grow屬性默認值是0，即便用原本的寬度不拉伸。等於1時，就表示該項目寬度拉伸，佔據當前行剩餘的寬度。

5、align-self 屬性和 align-items 屬性

咱們作一點改變，在按鈕裏面插入一張圖片。

<form action="#">
    <input type="email" name="email" />
    <button type="submit"><svg>  <!-- a smiley icon -->  </svg></button>
</form>複製代碼

按鈕插入圖片後，它的高度發生了變化，變得更高了，這時候發生了一個奇妙的事情。

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

前面說過，彈性佈局默認不會改變項目的寬高，可是它默認改變項目的高度，若是項目沒有顯示指定高度，就將佔據容器的全部高度，本例中，按鈕變高了，致使表單元素也變高了，使得輸入框的高度自動拉伸了。

align-self屬性能夠改變這個行爲。

input {
    flex-grow: 1;
    align-self: center;
}複製代碼

align-self 屬性可取的四個值：

1.flex-start：頂邊對齊，高度不拉伸

2.flex-end：底邊對齊，高度不拉伸

3.center：居中，高度不拉伸

4.stretch：默認值，高度自動拉伸

若是項目不少，一個個地設置align-self屬性很麻煩，這時能夠在容器元素(本例是表單)設置align-items屬性，它的值被全部子項目的align-self屬性繼承。

form {
    display: flex;
    align-items: center;
}複製代碼

上面代碼中，<form>元素設置了align-items之後，就不用在控件上設置align-self，除非但願二者的值不同。

轉載：http://www.ruanyifeng.com/blog/2018/10/flexbox-form.html