彈性佈局(Flexbox)逐漸流行,越來越多人使用,因爲它寫 CSS 佈局真是太方便了。
三年前,我寫過 Flexbox 的介紹(上,下),但是有些地方寫得不清楚。今天,我看到一篇教程,才意識到一個最簡單的表單,就可以解釋 Flexbox,而且內容還很實用。
下面,你只需要10分鐘,就可以學會簡單的表單佈局。
一、<form> 元素
表單使用<form>
元素。
<form></form>
上面是一個空表單。根據 HTML 標準,它是一個塊級元素,默認將佔據全部寬度,但是高度爲0,因爲沒有任何內容。
二、表單控件
現在,加入兩個最常用的表單控件。
<form> <input type="email" name="email"> <button type="submit">Send</button> </form>
上面代碼中,表單包含一個輸入框(<input>
)和一個按鈕(<button>
)。
根據標準,這兩個控件都是行內塊級元素(inline-block),也就是說,它們默認並排在一行上。
上圖是瀏覽器對這個表單的默認渲染(顏色除外),可以看到,這兩個控件之間有3像素~4像素的間隔,這是瀏覽器的內置樣式指定的。
三、指定 Flexbox 佈局
接着,指定表單使用 Flexbox 佈局。
form { display: flex; }
可以看到,兩個控件之間的間隔消失了,因爲彈性佈局的項目(item)默認沒有間隔。
四、flex-grow 屬性
兩個地方值得注意。
(1)兩個控件元素的寬度沒有發生變化,因爲彈性佈局默認不改變項目的寬度。 (2)彈性佈局默認左對齊,所以兩個控件會從行首開始排列。
如果我們希望,輸入框佔據當前行的所有剩餘寬度,只需要指定輸入框的flex-grow
屬性爲1
。
input { flex-grow: 1; }
上圖中,按鈕的寬度沒變,但是輸入框變寬了,等於當前行的寬度減去按鈕的寬度。
flex-grow
屬性默認等於0
,即使用本來的寬度,不拉伸。等於1
時,就表示該項目寬度拉伸,佔據當前行的所有剩餘寬度。
五、align-items 屬性
我們做一點改變,在按鈕裏面插入一張圖片。
<form action="#"> <input type="email" placeholder="Enter your email"> <button type="button"><svg> <!-- a smiley icon --> </svg></button> </form>
按鈕插入圖片後,它的高度變了,變得更高了。這時,就發生了一件很奇妙的事情。
上圖中,按鈕變高了,輸入框也自動變得一樣高了!
前面說過,彈性佈局默認不改變項目的寬度,但是它默認改變項目的高度。如果項目沒有顯式指定高度,就將佔據容器的所有高度。 本例中,按鈕變高了,導致表單元素也變高了,使得輸入框的高度自動拉伸了。
align-items
屬性可以改變這種行爲。
input { flex-grow: 1; align-items: center; }
align-items
屬性可以取四個值。
flex-start
:頂邊對齊,高度不拉伸flex-end
:底邊對齊,高度不拉伸center
:居中,高度不拉伸stretch
:默認值,高度自動拉伸
(完)