彈性布局(Flexbox)逐漸流行，越來越多的人開始使用，因為它寫Css布局真是太簡單了一

一、<form>元素

表單使用<form>元素

<form></form>復制代碼

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

二、表單控件

現(xiàn)在加入兩個表單控件

<form><input type="email" name="email"/><button type="submit">Send</button> <form>復制代碼

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

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

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

三、指定的Flexbox布局

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

form {display: flex; }復制代碼

這時在瀏覽器中可以看到兩個控件之間的間距消失了。因為彈性布局的項目(item)默認沒有間距。

四、flex-grow屬性

兩個地方值得注意：

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

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

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

input {flex-grow: 1; }復制代碼

這時在瀏覽器中可以看到，按鈕的寬度沒有發(fā)生變化，但是輸入框變寬了，等于當前行的寬度減去按鈕的寬度。

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

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

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

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

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

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

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

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

總結

以上是生活随笔為你收集整理的Flexbox 最简单的表单的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。