作者 | 阮一峰
** |
彈性布局（flexbox）逐漸流行，越來越多人使用，因為它寫 css 布局真是太方便了。
三年前，我寫過 flexbox 的介紹（上，下），但是有些地方寫得不清楚。今天，我看到一篇教程，才意識到乙個最簡單的表單，就可以解釋 flexbox，而且內容還很實用。
下面，你只需要10分鐘，就可以學會簡單的表單布局。
一、
上面是乙個空表單。根據 html 標準，它是乙個塊級元素，預設將佔據全部寬度，但是高度為0，因為沒有任何內容。
二、表單控制項
現在，加入兩個最常用的表單控制項。
上面**中，表單包含乙個輸入框（）和乙個按鈕（）。
根據標準，這兩個控制項都是行內塊級元素（inline-block），也就是說，它們預設併排在一行上。
上圖是瀏覽器對這個表單的預設渲染（顏色除外），可以看到，這兩個控制項之間有3畫素～4畫素的間隔，這是瀏覽器的內建樣式指定的。
三、指定 flexbox 布局
接著，指定表單使用 flexbox 布局。
form
可以看到，兩個控制項之間的間隔消失了，因為彈性布局的專案（item）預設沒有間隔。
四、flex-grow 屬性
兩個地方值得注意。
（1）兩個控制項元素的寬度沒有發生變化，因為彈性布局預設不改變專案的寬度。
（2）彈性布局預設左對齊，所以兩個控制項會從行首開始排列。
如果我們希望，輸入框佔據當前行的所有剩餘寬度，只需要指定輸入框的flex-grow屬性為1。
input
上圖中，按鈕的寬度沒變，但是輸入框變寬了，等於當前行的寬度減去按鈕的寬度。
flex-grow屬性預設等於0，即使用本來的寬度，不拉伸。等於1時，就表示該專案寬度拉伸，佔據當前行的所有剩餘寬度。
五、align-self 屬性和 align-items 屬性
我們做一點改變，在按鈕裡面插入一張。
按鈕插入後，它的高度變了，變得更高了。這時，就發生了一件很奇妙的事情。
上圖中，按鈕變高了，輸入框也自動變得一樣高了！
前面說過，彈性布局預設不改變專案的寬度，但是它預設改變專案的高度。如果專案沒有顯式指定高度，就將佔據容器的所有高度。 本例中，按鈕變高了，導致表單元素也變高了，使得輸入框的高度自動拉伸了。
align-self屬性可以改變這種行為。
align-self屬性可以取四個值。
如果專案很多，乙個個地設定align-self屬性就很麻煩。這時，可以在容器元素（本例為表單）設定align-items屬性，它的值被所有子專案的align-self屬性繼承。
form
上面**中，元素設定了align-items以後，就不用在控制項上設定align-self，除非希望兩者的值不一樣。
Flexbox 布局的最簡單表單
日期 2018年10月18日 彈性布局 flexbox 逐漸流行，越來越多人使用，因為它寫 css 布局真是太方便了。三年前，我寫過 flexbox 的介紹 上，下 但是有些地方寫得不清楚。今天，我看到一篇教程，才意識到乙個最簡單的表單，就可以解釋 flexbox，而且內容還很實用。下面，你只需要1...
Flexbox 布局的最簡單表單的實現
彈性布局 flexbox 逐漸流行，越來越多人使用，因為它寫 css 布局真是太方便了。三年前，我寫過 flexbox 的介紹 上，下 但是有些地方寫得不清楚。今天，我看到一篇 教程 才意識到乙個最簡單的表單，就可以解釋 flexbox，而且內容還很實用。下面，你只需要10分鐘，就可以程式設計客棧學...
簡單的表單布局
此篇博文的重點不是布局，只是單純的記錄下自己一直忽視的知識點。效果圖與下圖類似，只是沒有滾動條。剛開始，本人想到用form表單做，程式如下 html html head lang en meta charset utf 8 title title link rel stylesheet href e...